/*
 * ============================================================================
 * Copyright (c) 2025 ATH SOLUTIONS (PTY) LTD. All rights reserved.
 * KwaZulu-Natal, Republic of South Africa.
 * ============================================================================
 *
 * @BEGIN Developer Log Header Block
 * @FILENAME: tokens.css
 * @TITLE: Wexford Lodge - Member Portal
 * @DESCRIPTION: Design system token file. Defines all CSS custom properties: brand colour scales, semantic colour aliases, typography, fluid type scale, spacing, border radius, shadows, transitions, z-index, and layout dimensions. All component and view stylesheets must reference these tokens exclusively - no hardcoded values.
 * @AUTHOR: Ary van der Pijl
 * @COMPANY: ATH SOLUTIONS (PTY) LTD
 * @WEBSITE: https://www.ath.solutions/
 * @EMAIL: info@ath.solutions
 * @COPYRIGHT: All Rights Reserved
 * @LICENSE: ATH SOLUTIONS - PROPRIETARY SOFTWARE LICENCE AGREEMENT (https://www.ath.solutions/documents/ath_solutions_software_licence_agreement.pdf)
 *
 * BEGIN CHANGELOG
 * @IMPORTANT NOTICE: Developers working on these files MUST update and maintain the Developers Change Log, failure to do is not an option:
 * !==================================================================================================================================================================
 * VERSION 1.0.0.6
 * - File Modified | Ary van der Pijl | 2026/07/16 | QA-070 | Retrofitted brand identity to
                                                           the new design mockup: added
                                                           --color-forest-* (new default
                                                           primary, Irish constitution) and
                                                           --color-heather-* (Scottish
                                                           constitution) brand scales,
                                                           refreshed --color-gold-* toward a
                                                           brighter/warmer accent, swapped
                                                           --font-display from Playfair
                                                           Display to Cormorant Garamond, and
                                                           added [data-constitution="english
                                                           |scottish"] override blocks
                                                           (English reuses the existing
                                                           --color-navy-* scale unchanged).
                                                           Irish has no override block since
                                                           it is now the default primary. Also
                                                           updated --shadow-focus/--shadow-glow
                                                           from rgba(184,134,11,*) to
                                                           rgba(192,138,14,*) to match. |
 * VERSION 1.0.0.5
 * - File Modified | Ary van der Pijl | 2026/07/12 | A11Y-010 | Darkened --color-text-muted to clear WCAG AA 4.5:1 (computed relative luminance / contrast ratio, not measured rendering). Light mode: #A3A3A3 (var(--color-neutral-400)) on white was ~2.50:1 - changed to a direct #6B6B6B, ~5.33:1. Dark mode ([data-theme="dark"] and @media prefers-color-scheme: dark): #64748B on --color-surface #0C1525 was ~3.84:1 - changed to #7E8CA3, ~5.36:1. --color-text-muted is used broadly (placeholders, forms, cards, tables, toast, layout) - darkening it is safe everywhere since it only ever increases contrast versus the prior value. |
 * VERSION 1.0.0.4
 * - File Modified | Ary van der Pijl | 2026/07/11 | CSS-003 | Added --overlay-white-08/-60/-80 and --overlay-black-15/-55 tokens, consolidating the most-repeated un-tokenized alpha overlay values (partial pass, see DEFECTS.md). |
 * VERSION 1.0.0.3
 * - File Modified | Ary van der Pijl | 2026/07/11 | CSS-002, CSS-004, CSS-005 | Added --color-bg-subtle token; removed the dead :has(~ body) dark-mode selector (can never match); added dark-mode remap for the semantic status scale (success/warning/danger/info) plus --color-navy-50/--color-gold-50/--color-festive-board. |
 * VERSION 1.0.0.2
 * - File Modified | Ary van der Pijl | 2026/06/19 | STANDARDS-COMPLIANCE | Applied ATH Solutions 2026 coding standards. |
 * VERSION 1.0.0.1
 * + File Created, Ary van der Pijl, 2026/06/13
 * ==================================================================================================================================================================!
 * END CHANGELOG
 */

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT MODE TOKENS  (default)
═══════════════════════════════════════════════════════════════════════════ */

:root {

   /* ─────────────────────────────────────────────────────────────────────
     BRAND - NAVY SCALE
  ───────────────────────────────────────────────────────────────────── */

   --color-navy-950: #080F19;
   --color-navy-900: #0D1620;
   --color-navy-800: #121E30;
   --color-navy-700: #1B2A4A;
   /* Primary brand */
   --color-navy-600: #243858;
   --color-navy-500: #2E4A70;
   --color-navy-400: #4A6899;
   --color-navy-300: #7B9BBD;
   --color-navy-200: #B0C6DC;
   --color-navy-100: #D8E5F0;
   --color-navy-50: #EEF4FA;

   /* ─────────────────────────────────────────────────────────────────────
     BRAND - GOLD SCALE
  ───────────────────────────────────────────────────────────────────── */

   --color-gold-950: #3D2900;
   --color-gold-900: #614000;
   --color-gold-800: #8F5F00;
   --color-gold-700: #C08A0E;
   /* Primary accent */
   --color-gold-600: #D9A62E;
   --color-gold-500: #E3B94A;
   --color-gold-400: #EAC978;
   --color-gold-300: #F0D9A0;
   --color-gold-200: #F5E7C4;
   --color-gold-100: #FAF2E0;
   --color-gold-50: #FDFAF2;

   /* ─────────────────────────────────────────────────────────────────────
     BRAND - FOREST SCALE (default primary; Irish constitution)
  ───────────────────────────────────────────────────────────────────── */

   --color-forest-950: #071410;
   --color-forest-900: #0C2018;
   --color-forest-800: #123024;
   --color-forest-700: #1A4635;
   /* Primary brand (default) */
   --color-forest-600: #235943;
   --color-forest-500: #2E7057;
   --color-forest-400: #4B9075;
   --color-forest-300: #7DB59D;
   --color-forest-200: #B2D6C5;
   --color-forest-100: #D9EDE3;
   --color-forest-50: #F0F9F5;

   /* ─────────────────────────────────────────────────────────────────────
     BRAND - HEATHER SCALE (Scottish constitution)
  ───────────────────────────────────────────────────────────────────── */

   --color-heather-950: #180B22;
   --color-heather-900: #261233;
   --color-heather-800: #391B4C;
   --color-heather-700: #4F2A68;
   /* Primary brand (Scottish) */
   --color-heather-600: #653784;
   --color-heather-500: #7C46A0;
   --color-heather-400: #9A6BB9;
   --color-heather-300: #BC9AD3;
   --color-heather-200: #D8C3E7;
   --color-heather-100: #EDE1F4;
   --color-heather-50: #F8F1FB;

   /* ─────────────────────────────────────────────────────────────────────
     NEUTRAL SCALE
  ───────────────────────────────────────────────────────────────────── */

   --color-neutral-950: #0A0A0A;
   --color-neutral-900: #171717;
   --color-neutral-800: #262626;
   --color-neutral-700: #3D3D3D;
   --color-neutral-600: #525252;
   --color-neutral-500: #737373;
   --color-neutral-400: #A3A3A3;
   --color-neutral-300: #D4D4D4;
   --color-neutral-200: #E5E5E5;
   --color-neutral-100: #F5F5F5;
   --color-neutral-50: #FAFAFA;

   /* ─────────────────────────────────────────────────────────────────────
     SEMANTIC COLOURS
  ───────────────────────────────────────────────────────────────────── */

   --color-primary: var(--color-forest-700);
   --color-primary-dark: var(--color-forest-800);
   --color-primary-hover: var(--color-forest-600);
   --color-accent: var(--color-gold-700);
   --color-accent-dark: var(--color-gold-800);
   --color-accent-hover: var(--color-gold-600);
   --color-accent-light: var(--color-gold-50);

   --color-success: #1A7340;
   --color-success-text: #145730;
   --color-success-bg: #D4EDDA;
   --color-success-border: #A3D9B8;

   --color-warning: #9A6108;
   --color-warning-text: #7D4E07;
   --color-warning-bg: #FFF3CD;
   --color-warning-border: #FFDF7E;

   --color-danger: #C62828;
   --color-danger-text: #991F1F;
   --color-danger-bg: #FDECEA;
   --color-danger-border: #F4B8B8;

   --color-info: #0055A5;
   --color-info-text: #003D7A;
   --color-info-bg: #CCE0FF;
   --color-info-border: #99C0FF;

   --color-festive-board: #8B5E3C;

   --color-purple-bg: #EDE9FE;
   --color-purple-text: #5B21B6;
   --color-purple-border: #C4B5FD;

   /* ─────────────────────────────────────────────────────────────────────
     SURFACE & TEXT
  ───────────────────────────────────────────────────────────────────── */

   --color-surface: #FFFFFF;
   --color-surface-2: #F8F8F6;
   --color-surface-3: #F0F0EC;
   --color-surface-4: #E8E8E4;
   --color-bg-subtle: var(--color-surface-2);

   --color-text-primary: var(--color-neutral-900);
   --color-text-secondary: var(--color-neutral-600);
   --color-text-muted: #6B6B6B;
   /* A11Y-010: was var(--color-neutral-400) #A3A3A3, ~2.5:1 on white; #6B6B6B computes to ~5.33:1, clears WCAG AA 4.5:1 */
   --color-text-disabled: var(--color-neutral-300);
   --color-text-inverse: #FFFFFF;
   --color-text-on-primary: #FFFFFF;
   --color-text-on-accent: var(--color-navy-900);

   --color-border: var(--color-neutral-200);
   --color-border-strong: var(--color-neutral-300);
   --color-border-focus: var(--color-accent);

   /* ─────────────────────────────────────────────────────────────────────
     TYPOGRAPHY
  ───────────────────────────────────────────────────────────────────── */

   --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
   --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
   --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

   /* Fluid type scale */
   --text-xs: clamp(0.75rem, 0.70rem + 0.25vw, 0.80rem);
   --text-sm: clamp(0.875rem, 0.83rem + 0.23vw, 0.95rem);
   --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.075rem);
   --text-lg: clamp(1.125rem, 1.05rem + 0.38vw, 1.25rem);
   --text-xl: clamp(1.25rem, 1.15rem + 0.50vw, 1.5rem);
   --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
   --text-3xl: clamp(1.875rem, 1.65rem + 1.13vw, 2.5rem);
   --text-4xl: clamp(2.25rem, 1.90rem + 1.75vw, 3.5rem);
   --text-5xl: clamp(2.75rem, 2.30rem + 2.25vw, 4.5rem);

   --font-weight-normal: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;

   --line-height-none: 1;
   --line-height-tight: 1.25;
   --line-height-snug: 1.375;
   --line-height-normal: 1.5;
   --line-height-relaxed: 1.625;
   --line-height-loose: 2;

   --letter-spacing-tighter: -0.05em;
   --letter-spacing-tight: -0.025em;
   --letter-spacing-normal: 0em;
   --letter-spacing-wide: 0.025em;
   --letter-spacing-wider: 0.05em;
   --letter-spacing-widest: 0.1em;

   /* ─────────────────────────────────────────────────────────────────────
     SPACING (4px base grid)
  ───────────────────────────────────────────────────────────────────── */

   --space-0: 0;
   --space-px: 1px;
   --space-0-5: 0.125rem;
   /*  2px */
   --space-1: 0.25rem;
   /*  4px */
   --space-1-5: 0.375rem;
   /*  6px */
   --space-2: 0.5rem;
   /*  8px */
   --space-2-5: 0.625rem;
   /* 10px */
   --space-3: 0.75rem;
   /* 12px */
   --space-3-5: 0.875rem;
   /* 14px */
   --space-4: 1rem;
   /* 16px */
   --space-5: 1.25rem;
   /* 20px */
   --space-6: 1.5rem;
   /* 24px */
   --space-7: 1.75rem;
   /* 28px */
   --space-8: 2rem;
   /* 32px */
   --space-9: 2.25rem;
   /* 36px */
   --space-10: 2.5rem;
   /* 40px */
   --space-11: 2.75rem;
   /* 44px */
   --space-12: 3rem;
   /* 48px */
   --space-14: 3.5rem;
   /* 56px */
   --space-16: 4rem;
   /* 64px */
   --space-20: 5rem;
   /* 80px */
   --space-24: 6rem;
   /* 96px */
   --space-28: 7rem;
   /* 112px */
   --space-32: 8rem;
   /* 128px */

   /* ─────────────────────────────────────────────────────────────────────
     BORDER RADIUS
  ───────────────────────────────────────────────────────────────────── */

   --radius-none: 0;
   --radius-sm: 0.25rem;
   /*  4px */
   --radius-md: 0.5rem;
   /*  8px */
   --radius-lg: 0.75rem;
   /* 12px */
   --radius-xl: 1rem;
   /* 16px */
   --radius-2xl: 1.25rem;
   /* 20px */
   --radius-3xl: 1.5rem;
   /* 24px */
   --radius-full: 9999px;

   /* ─────────────────────────────────────────────────────────────────────
     SHADOWS
  ───────────────────────────────────────────────────────────────────── */

   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
   --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
   --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05);
   --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.09), 0 10px 10px rgba(0, 0, 0, 0.04);
   --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);
   --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
   --shadow-none: none;
   --shadow-focus: 0 0 0 3px rgba(192, 138, 14, 0.35);
   --shadow-glow: 0 0 0 4px rgba(192, 138, 14, 0.20);

   /* ─────────────────────────────────────────────────────────────────────
     OVERLAYS
     Consolidates the most-repeated un-tokenized rgba(255,255,255,X)/
     rgba(0,0,0,X) values found across layout.css, nav.css, public.css,
     buttons.css, modals.css (CSS-003). Not an exhaustive set — only the
     values that recurred 2+ times were promoted to tokens.
  ───────────────────────────────────────────────────────────────────── */

   --overlay-white-08: rgba(255, 255, 255, 0.08);
   --overlay-white-60: rgba(255, 255, 255, 0.6);
   --overlay-white-80: rgba(255, 255, 255, 0.8);
   --overlay-black-15: rgba(0, 0, 0, 0.15);
   --overlay-black-55: rgba(0, 0, 0, 0.55);

   /* ─────────────────────────────────────────────────────────────────────
     TRANSITIONS
  ───────────────────────────────────────────────────────────────────── */

   --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-in: cubic-bezier(0.4, 0, 1, 1);
   --ease-out: cubic-bezier(0, 0, 0.2, 1);
   --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

   --transition-fast: 150ms var(--ease-default);
   --transition-base: 250ms var(--ease-default);
   --transition-slow: 400ms var(--ease-default);
   --transition-spring: 500ms var(--ease-spring);

   /* ─────────────────────────────────────────────────────────────────────
     Z-INDEX SCALE
  ───────────────────────────────────────────────────────────────────── */

   --z-below: -1;
   --z-base: 0;
   --z-raised: 10;
   --z-dropdown: 100;
   --z-overlay: 200;
   --z-modal: 300;
   --z-toast: 400;
   --z-nav: 500;

   /* ─────────────────────────────────────────────────────────────────────
     LAYOUT DIMENSIONS
  ───────────────────────────────────────────────────────────────────── */

   --sidebar-width: 260px;
   --sidebar-width-collapsed: 64px;
   --topbar-height: 64px;
   --content-max-width: 1440px;

   /* Breakpoint reference values (use in JS / media queries) */
   --bp-sm: 576px;
   --bp-md: 768px;
   --bp-lg: 1024px;
   --bp-xl: 1280px;
   --bp-2xl: 1536px;

   /* ─────────────────────────────────────────────────────────────────────
     COMPONENT TOKENS
  ───────────────────────────────────────────────────────────────────── */

   /* Avatar */
   --avatar-sm: 32px;
   --avatar-md: 48px;
   --avatar-lg: 72px;
   --avatar-xl: 96px;

   /* Input */
   --input-height-sm: 36px;
   --input-height-md: 44px;
   --input-height-lg: 52px;

   /* Sidebar nav item */
   --nav-item-height: 44px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE TOKENS
   Manual toggle: data-theme="dark" on <html>
   System fallback: prefers-color-scheme: dark (unless data-theme="light")
═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
   --color-surface: #0C1525;
   --color-surface-2: #131F32;
   --color-surface-3: #1A2840;
   --color-surface-4: #213350;
   --color-text-primary: #EEF2F7;
   --color-text-secondary: #94A3B8;
   --color-text-muted: #7E8CA3;
   /* A11Y-010: was #64748B, ~3.84:1 on --color-surface #0C1525; #7E8CA3 computes to ~5.36:1, clears WCAG AA 4.5:1 */
   --color-text-disabled: #3D4D60;
   --color-border: rgba(255, 255, 255, 0.08);
   --color-border-strong: rgba(255, 255, 255, 0.14);
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40);
   --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.35);
   --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.40);

   /* Semantic status scale - dark-appropriate: desaturated dark tint backgrounds, light saturated text/icon */
   --color-success: #4ADE80;
   --color-success-text: #86EFAC;
   --color-success-bg: #0F2E1D;
   --color-success-border: #1F5C3B;

   --color-warning: #FBBF24;
   --color-warning-text: #FDE68A;
   --color-warning-bg: #3D2E05;
   --color-warning-border: #6B4F0A;

   --color-danger: #F87171;
   --color-danger-text: #FCA5A5;
   --color-danger-bg: #3A1414;
   --color-danger-border: #6B2020;

   --color-info: #60A5FA;
   --color-info-text: #93C5FD;
   --color-info-bg: #0F2038;
   --color-info-border: #1E3A5F;

   --color-navy-50: #1A2840;
   --color-gold-50: #2A2410;
   --color-forest-50: #122A20;
   --color-heather-50: #241733;
   --color-festive-board: #C99A6B;
}

@media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
      --color-surface: #0C1525;
      --color-surface-2: #131F32;
      --color-surface-3: #1A2840;
      --color-surface-4: #213350;
      --color-text-primary: #EEF2F7;
      --color-text-secondary: #94A3B8;
      --color-text-muted: #7E8CA3;
      /* A11Y-010: matches [data-theme="dark"] override above */
      --color-text-disabled: #3D4D60;
      --color-border: rgba(255, 255, 255, 0.08);
      --color-border-strong: rgba(255, 255, 255, 0.14);
      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40);
      --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.35);
      --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.40);

      --color-success: #4ADE80;
      --color-success-text: #86EFAC;
      --color-success-bg: #0F2E1D;
      --color-success-border: #1F5C3B;

      --color-warning: #FBBF24;
      --color-warning-text: #FDE68A;
      --color-warning-bg: #3D2E05;
      --color-warning-border: #6B4F0A;

      --color-danger: #F87171;
      --color-danger-text: #FCA5A5;
      --color-danger-bg: #3A1414;
      --color-danger-border: #6B2020;

      --color-info: #60A5FA;
      --color-info-text: #93C5FD;
      --color-info-bg: #0F2038;
      --color-info-border: #1E3A5F;

      --color-navy-50: #1A2840;
      --color-gold-50: #2A2410;
      --color-forest-50: #122A20;
      --color-heather-50: #241733;
      --color-festive-board: #C99A6B;

      --color-purple-bg: #241B3D;
      --color-purple-text: #C4B5FD;
      --color-purple-border: #4C3A7A;
   }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONSTITUTION THEMES
   Default (no attribute, or an unrecognised free-text value) is Irish - the
   platform's base --color-primary already points at the Forest scale above.
   English/Scottish re-point --color-primary* only; the underlying scale
   values are dark enough to work unchanged in both light and dark mode
   (mirrors how --color-navy-700 itself never varies by theme today).
   Attribute set server-side in app.php from $_SESSION['lodge_constitution'].
═══════════════════════════════════════════════════════════════════════════ */

[data-constitution="english"] {
   --color-primary: var(--color-navy-700);
   --color-primary-dark: var(--color-navy-800);
   --color-primary-hover: var(--color-navy-600);
}

[data-constitution="scottish"] {
   --color-primary: var(--color-heather-700);
   --color-primary-dark: var(--color-heather-800);
   --color-primary-hover: var(--color-heather-600);
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
   :root {
      --transition-fast: 0.01ms;
      --transition-base: 0.01ms;
      --transition-slow: 0.01ms;
      --transition-spring: 0.01ms;
   }
}