/* tokens.css — global CSS custom properties */
/* Single source of design truth for colors, typography, and spacing. */

:root {
    /* Tells the browser to render native form controls (select option
       popups, date pickers, scrollbars, autofill) in the matching scheme.
       Without this, the OS-rendered chrome stays light-on-light in dark
       mode regardless of the .input styling on the closed control. */
    color-scheme: light;

    /* ============================================================
       Zone: Home / Auth / Player — Sky Bloom Blue
       Anchor: #79C1E6 at shade 300
       Covers: home, auth, player, community routes
       ============================================================ */
    --home-100: #f0f9fd;   /* page background tint */
    --home-200: #c8e8f5;   /* card borders, dividers */
    --home-300: #79c1e6;   /* secondary accents, tags (brand anchor) */
    --home-400: #4aa8d6;   /* secondary buttons, icon fills */
    --home-500: #1877a6;   /* nav item text (default) */
    --home-600: #0d5e87;   /* nav active, primary buttons */
    --home-700: #094874;   /* hover text, links */
    --home-800: #063356;   /* logo, headings on light bg */
    --home-900: #031f37;   /* body text, high contrast */

    /* ============================================================
       Zone: Club Hub / Courses / Rounds — Fresh Leaf Green
       Anchor: #92C3A0 at shade 300
       Covers: club-hub, courses, community (rounds) routes
       ============================================================ */
    --club-100: #f0f8f2;   /* page background tint */
    --club-200: #d0e8d7;   /* card borders, section dividers */
    --club-300: #92c3a0;   /* secondary accents, badges (brand anchor) */
    --club-400: #62a876;   /* secondary buttons, icon fills */
    --club-500: #3d7a52;   /* nav item text (default) */
    --club-600: #2d6040;   /* nav active, primary buttons */
    --club-700: #224930;   /* hover text, active links */
    --club-800: #163222;   /* headings on light bg */
    --club-900: #0c1e14;   /* body text, high contrast */

    /* ============================================================
       Zone: Events — Harvest Orange
       Anchor: #DC8642 at shade 500
       Covers: events routes
       ============================================================ */
    --event-100: #fef8f0;   /* page background tint */
    --event-200: #fce9cc;   /* card borders, dividers */
    --event-300: #f7cd96;   /* secondary accents, availability indicators */
    --event-400: #ecaa5e;   /* secondary buttons, icon fills */
    --event-500: #dc8642;   /* nav item text / brand anchor */
    --event-600: #9f5820;   /* nav active, primary buttons */
    --event-700: #7c4218;   /* hover text, links */
    --event-800: #572d0f;   /* headings on light bg */
    --event-900: #341a08;   /* body text, high contrast */

    /* ============================================================
       Zone: Community — Mulberry Violet
       Anchor: #A47BC8 at shade 300
       Covers: community routes (Lost & Found, Stats, Games, News, Chat)
       ============================================================ */
    --community-100: #f7f2fb;   /* page background tint */
    --community-200: #e4d6f0;   /* card borders, dividers */
    --community-300: #a47bc8;   /* secondary accents, badges (brand anchor) */
    --community-400: #855eae;   /* secondary buttons, icon fills */
    --community-500: #644488;   /* nav item text (default) */
    --community-600: #4e3370;   /* nav active, primary buttons */
    --community-700: #3c2558;   /* hover text, links */
    --community-800: #2a193f;   /* headings on light bg */
    --community-900: #170c25;   /* body text, high contrast */

    /* ============================================================
       Zone: Admin — Charcoal Neutral
       ============================================================ */
    --admin-100: #f4f5f7;   /* page background tint */
    --admin-200: #dde0e7;   /* card borders, dividers */
    --admin-300: #b0b7c6;   /* secondary accents, muted labels */
    --admin-400: #7e8ba0;   /* secondary buttons, icon fills */
    --admin-500: #55637a;   /* nav item text (default) */
    --admin-600: #3d4f66;   /* nav active, primary buttons */
    --admin-700: #2c3a50;   /* hover text, links */
    --admin-800: #1c2840;   /* headings on light bg */
    --admin-900: #0e1628;   /* body text, high contrast */

    /* ============================================================
       Semantic State Colors — never overridden by zone
       ============================================================ */
    --color-success: #1e8a4c;
    --color-warning: #b45309;
    --color-error:   #c0392b;
    --color-info:    #1a6fa8;

    /* Semantic state tints — backgrounds, foregrounds, and borders
       used for status badges and inline messaging. */
    --color-success-bg:     #e7f5e9;
    --color-success-fg:     #1b5e20;
    --color-success-border: #2e7d32;
    --color-warning-bg:     #fff4e0;
    --color-warning-fg:     #7a4b00;
    --color-warning-border: #d79a3a;
    --color-info-bg:        #e3f2fd;
    --color-info-fg:        #0d47a1;
    --color-info-border:    #1565c0;
    --color-error-bg:       #fff0f0;

    /* ============================================================
       Typography
       ============================================================ */
    --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-size-2xs:  0.6875rem;   /* 11px — chart axis / dense-grid micro-labels only.
                                      Below the 13px body minimum, so do not use for
                                      prose or anything a user has to read at length. */
    --font-size-xs:   0.8125rem;   /* 13px */
    --font-size-sm:   0.875rem;    /* 14px */
    --font-size-md:   0.9375rem;   /* 15px */
    --font-size-base: 1rem;        /* 16px */
    --font-size-lg:   1.125rem;    /* 18px */
    --font-size-xl:   1.5rem;      /* 24px */
    --font-size-2xl:  2rem;        /* 32px */
    --font-size-3xl:  2.75rem;     /* 44px */

    /* ============================================================
       Spacing
       ============================================================ */
    --space-4:  4px;
    --space-8:  8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-14: 14px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-28: 28px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;

    /* ============================================================
       Putting League — team identification colours.
       Used only for the team-identification dot/chip on team-league
       match cards, bracket cells, and standings rows. Not part of
       the zone-color system.
       ============================================================ */
    --team-amber:   #d97706;
    --team-rose:    #e11d48;
    --team-emerald: #059669;
    --team-sky:     #0284c7;
    --team-violet:  #7c3aed;
    --team-cyan:    #0891b2;
    --team-fuchsia: #c026d3;
    --team-slate:   #475569;

    /* ============================================================
       Layout — Nav & Section Header
       ============================================================ */
    --nav-height-desktop:            64px;
    --nav-height-mobile:             56px;
    --section-header-height-desktop: 80px;
    --section-header-height-mobile:  64px;

    /* ============================================================
       Layout — Content Area
       ============================================================ */
    --content-max-width:       1200px;
    --content-padding-desktop: 32px 24px;
    --content-padding-mobile:  24px 16px;

    /* ============================================================
       Cards
       ============================================================ */
    --card-radius: 8px;
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

    /* ============================================================
       Radii — extended scale for the new design system
       ============================================================ */
    --radius-2xs:  2px;
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  20px;
    --radius-pill: 999px;

    /* ============================================================
       Shadows
       ============================================================ */
    --shadow-dialog: 0 4px 20px rgba(0, 0, 0, 0.18);

    /* Elevation scale — subtle, layered, brand-tintable. */
    --elevation-1: 0 1px 2px rgba(15, 23, 42, 0.06);
    --elevation-2: 0 2px 6px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --elevation-3: 0 6px 16px rgba(15, 23, 42, 0.10), 0 2px 4px rgba(15, 23, 42, 0.05);
    --elevation-4: 0 16px 32px rgba(15, 23, 42, 0.14), 0 4px 8px rgba(15, 23, 42, 0.06);

    /* ============================================================
       Motion — durations and easings
       ============================================================ */
    --motion-fast:    120ms;
    --motion-base:    180ms;
    --motion-slow:    280ms;
    --ease-standard:  cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasis:  cubic-bezier(0.3, 0, 0, 1);

    /* Modal scrim — the dimming layer behind a dialog, drawer, or overlay.
       A dark translucent scrim reads correctly in both themes, so this is a
       single value rather than a light/dark pair. Deliberately darker
       treatments (e.g. the photo lightbox) keep their own value. */
    --scrim: rgba(0, 0, 0, 0.5);

    /* ============================================================
       Z-index Scale
       ============================================================ */
    --z-scrim:  800;
    --z-nav:    1000;
    --z-drawer: 1050;
    --z-toast:  1100;

    /* ============================================================
       Dark zone scales — applied under [data-theme="dark"].
       Each scale flips perceptual lightness so var(--zone-100)
       stays the surface tint and var(--zone-900) stays the
       text-strong color, but in inverted brightness.
       Mid shades (300–500) are kept vivid for accents/icons.
       ============================================================ */

    /* Sky Bloom — dark variant */
    --home-dark-100: #0a1722;   /* page bg */
    --home-dark-200: #0f2333;   /* card border / divider */
    --home-dark-300: #1c3a52;   /* subtle accents */
    --home-dark-400: #4aa8d6;   /* secondary buttons / icon fills (kept vivid) */
    --home-dark-500: #7cc3e6;   /* nav text default (lighter for legibility) */
    --home-dark-600: #98d2ec;   /* primary buttons (brighter on dark) */
    --home-dark-700: #b5dff1;   /* hover text */
    --home-dark-800: #d6ecf7;   /* headings */
    --home-dark-900: #eef7fc;   /* body text */

    /* Fresh Leaf — dark variant */
    --club-dark-100: #0c1a13;
    --club-dark-200: #14271d;
    --club-dark-300: #214030;
    --club-dark-400: #62a876;
    --club-dark-500: #8bc69b;
    --club-dark-600: #a7d6b5;
    --club-dark-700: #c2e2cc;
    --club-dark-800: #ddeee2;
    --club-dark-900: #f1f8f3;

    /* Harvest Orange — dark variant */
    --event-dark-100: #1f140a;
    --event-dark-200: #2e1d10;
    --event-dark-300: #4a311c;
    --event-dark-400: #ecaa5e;
    --event-dark-500: #f0b87a;
    --event-dark-600: #f5cb9b;
    --event-dark-700: #f8dab8;
    --event-dark-800: #fbe9d3;
    --event-dark-900: #fdf4ea;

    /* Mulberry Violet — dark variant */
    --community-dark-100: #150b1f;
    --community-dark-200: #20132f;
    --community-dark-300: #3c2558;
    --community-dark-400: #855eae;
    --community-dark-500: #a98bcf;
    --community-dark-600: #c0a7e0;
    --community-dark-700: #d4c2eb;
    --community-dark-800: #e6d9f2;
    --community-dark-900: #f4ecfa;

    /* Charcoal Neutral — dark variant */
    --admin-dark-100: #0c1018;
    --admin-dark-200: #161b26;
    --admin-dark-300: #232a3a;
    --admin-dark-400: #7e8ba0;
    --admin-dark-500: #98a2b6;
    --admin-dark-600: #b0b9ca;
    --admin-dark-700: #c7cfdc;
    --admin-dark-800: #dde2eb;
    --admin-dark-900: #eef1f6;

    /* ============================================================
       Semantic surface, text, and border tokens.
       Use these in NEW components instead of zone shades — they
       adapt automatically to dark mode without per-component work.
       ============================================================ */

    /* Surfaces (elevation hierarchy) */
    --surface-app:       #f7f8fa;   /* outermost canvas */
    --surface-base:      #ffffff;   /* default panel */
    --surface-raised:    #ffffff;   /* cards */
    --surface-overlay:   #ffffff;   /* dialogs, popovers */
    --surface-sunken:    #f1f3f7;   /* inputs, code blocks */
    --surface-inverse:   #0e1628;   /* dark strip on light page */

    /* Text */
    --text-primary:   #0e1628;
    --text-secondary: #3a4256;
    --text-tertiary:  #6b7384;
    --text-muted:     #95a0b3;
    --text-inverse:   #ffffff;
    --text-link:      var(--zone-600, #0d5e87);
    --text-link-hover:var(--zone-700, #094874);

    /* Borders */
    --border-subtle: rgba(15, 23, 42, 0.08);
    --border-base:   rgba(15, 23, 42, 0.14);
    --border-strong: rgba(15, 23, 42, 0.22);
    --border-focus:  var(--zone-600, #0d5e87);

    /* Interactive surface tints (use over base) */
    --tint-hover:    rgba(15, 23, 42, 0.04);
    --tint-press:    rgba(15, 23, 42, 0.08);
    --tint-selected: rgba(15, 23, 42, 0.06);

    /* Focus ring — meets WCAG 2.4.11 (≥2px, ≥3:1 contrast). */
    --focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.45);

}

/* ============================================================
   Dark theme — semantic token overrides.
   Set on <html data-theme="dark"> by the theme bootstrap.
   Never use pure black; near-black tinted surfaces avoid
   smearing OLED contrast and feel less harsh.
   ============================================================ */
[data-theme="dark"] {
    color-scheme: dark;

    --surface-app:     #0b0f17;
    --surface-base:    #111726;
    --surface-raised:  #161d2e;
    --surface-overlay: #1b2336;
    --surface-sunken:  #0d1320;
    --surface-inverse: #f7f8fa;

    --text-primary:   #eef1f6;
    --text-secondary: #c2c9d6;
    --text-tertiary:  #98a2b6;
    --text-muted:     #6b7384;
    --text-inverse:   #0e1628;
    --text-link:      var(--zone-600, #98d2ec);
    --text-link-hover:var(--zone-700, #b5dff1);

    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-base:   rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.18);

    --tint-hover:    rgba(255, 255, 255, 0.05);
    --tint-press:    rgba(255, 255, 255, 0.09);
    --tint-selected: rgba(255, 255, 255, 0.07);

    --card-shadow:   0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-dialog: 0 12px 32px rgba(0, 0, 0, 0.55);
    --elevation-1:   0 1px 2px rgba(0, 0, 0, 0.40);
    --elevation-2:   0 2px 6px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.30);
    --elevation-3:   0 6px 16px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.30);
    --elevation-4:   0 16px 32px rgba(0, 0, 0, 0.60), 0 4px 8px rgba(0, 0, 0, 0.40);

    --focus-ring: 0 0 0 3px rgba(125, 195, 230, 0.55);

    /* Semantic state tints — re-tuned for dark surfaces. */
    --color-success-bg:     #0f2a17;
    --color-success-fg:     #b5e5c5;
    --color-success-border: #2e7d32;
    --color-warning-bg:     #2b1c08;
    --color-warning-fg:     #f1c889;
    --color-warning-border: #b07a2b;
    --color-info-bg:        #0f1f33;
    --color-info-fg:        #b5d3f1;
    --color-info-border:    #1565c0;
    --color-error-bg:       #2a1010;
}

/* Background of the app shell follows the active theme. */
html { background: var(--surface-app); color: var(--text-primary); }

/* ============================================================
   Zone alias mappings — applied by the router on navigation.
   Always use var(--zone-NNN) in component CSS, never the
   concrete section variable directly.

   The :root block below is the fallback for any moment or route
   where no body.zone-* class is applied — between first paint and
   main-master.SelectLinkForPage(), or on a route with no ZONE_MAP
   entry. Without it --zone-NNN is undefined and component
   fallbacks such as var(--zone-600, var(--admin-600)) leak the
   admin slate through. Home is the neutral default (auth and
   player already map to it). body.zone-* is more specific, so a
   zoned page still overrides this in both themes.
   ============================================================ */

:root {
    --zone-100: var(--home-100);
    --zone-200: var(--home-200);
    --zone-300: var(--home-300);
    --zone-400: var(--home-400);
    --zone-500: var(--home-500);
    --zone-600: var(--home-600);
    --zone-700: var(--home-700);
    --zone-800: var(--home-800);
    --zone-900: var(--home-900);
}

:root[data-theme="dark"] {
    --zone-100: var(--home-dark-100);
    --zone-200: var(--home-dark-200);
    --zone-300: var(--home-dark-300);
    --zone-400: var(--home-dark-400);
    --zone-500: var(--home-dark-500);
    --zone-600: var(--home-dark-600);
    --zone-700: var(--home-dark-700);
    --zone-800: var(--home-dark-800);
    --zone-900: var(--home-dark-900);
}

body.zone-home {
    --zone-100: var(--home-100);
    --zone-200: var(--home-200);
    --zone-300: var(--home-300);
    --zone-400: var(--home-400);
    --zone-500: var(--home-500);
    --zone-600: var(--home-600);
    --zone-700: var(--home-700);
    --zone-800: var(--home-800);
    --zone-900: var(--home-900);
    --card-hover-shadow-rgb: 13, 94, 135;    /* --home-600 */
}

body.zone-club {
    --zone-100: var(--club-100);
    --zone-200: var(--club-200);
    --zone-300: var(--club-300);
    --zone-400: var(--club-400);
    --zone-500: var(--club-500);
    --zone-600: var(--club-600);
    --zone-700: var(--club-700);
    --zone-800: var(--club-800);
    --zone-900: var(--club-900);
    --card-hover-shadow-rgb: 45, 96, 64;     /* --club-600 */
}

body.zone-events {
    --zone-100: var(--event-100);
    --zone-200: var(--event-200);
    --zone-300: var(--event-300);
    --zone-400: var(--event-400);
    --zone-500: var(--event-500);
    --zone-600: var(--event-600);
    --zone-700: var(--event-700);
    --zone-800: var(--event-800);
    --zone-900: var(--event-900);
    --card-hover-shadow-rgb: 159, 88, 32;    /* --event-600 */
}

body.zone-admin {
    --zone-100: var(--admin-100);
    --zone-200: var(--admin-200);
    --zone-300: var(--admin-300);
    --zone-400: var(--admin-400);
    --zone-500: var(--admin-500);
    --zone-600: var(--admin-600);
    --zone-700: var(--admin-700);
    --zone-800: var(--admin-800);
    --zone-900: var(--admin-900);
    --card-hover-shadow-rgb: 61, 79, 102;    /* --admin-600 */
}

body.zone-community {
    --zone-100: var(--community-100);
    --zone-200: var(--community-200);
    --zone-300: var(--community-300);
    --zone-400: var(--community-400);
    --zone-500: var(--community-500);
    --zone-600: var(--community-600);
    --zone-700: var(--community-700);
    --zone-800: var(--community-800);
    --zone-900: var(--community-900);
    --card-hover-shadow-rgb: 78, 51, 112;    /* --community-600 */
}

/* ============================================================
   Dark-mode zone remappings — when [data-theme="dark"] is set,
   the same body.zone-* class resolves --zone-NNN to the dark
   variant of that scale. Existing components that already use
   var(--zone-NNN) inherit dark-mode support automatically.
   ============================================================ */

[data-theme="dark"] body.zone-home {
    --zone-100: var(--home-dark-100);
    --zone-200: var(--home-dark-200);
    --zone-300: var(--home-dark-300);
    --zone-400: var(--home-dark-400);
    --zone-500: var(--home-dark-500);
    --zone-600: var(--home-dark-600);
    --zone-700: var(--home-dark-700);
    --zone-800: var(--home-dark-800);
    --zone-900: var(--home-dark-900);
}

[data-theme="dark"] body.zone-club {
    --zone-100: var(--club-dark-100);
    --zone-200: var(--club-dark-200);
    --zone-300: var(--club-dark-300);
    --zone-400: var(--club-dark-400);
    --zone-500: var(--club-dark-500);
    --zone-600: var(--club-dark-600);
    --zone-700: var(--club-dark-700);
    --zone-800: var(--club-dark-800);
    --zone-900: var(--club-dark-900);
}

[data-theme="dark"] body.zone-events {
    --zone-100: var(--event-dark-100);
    --zone-200: var(--event-dark-200);
    --zone-300: var(--event-dark-300);
    --zone-400: var(--event-dark-400);
    --zone-500: var(--event-dark-500);
    --zone-600: var(--event-dark-600);
    --zone-700: var(--event-dark-700);
    --zone-800: var(--event-dark-800);
    --zone-900: var(--event-dark-900);
}

[data-theme="dark"] body.zone-admin {
    --zone-100: var(--admin-dark-100);
    --zone-200: var(--admin-dark-200);
    --zone-300: var(--admin-dark-300);
    --zone-400: var(--admin-dark-400);
    --zone-500: var(--admin-dark-500);
    --zone-600: var(--admin-dark-600);
    --zone-700: var(--admin-dark-700);
    --zone-800: var(--admin-dark-800);
    --zone-900: var(--admin-dark-900);
}

[data-theme="dark"] body.zone-community {
    --zone-100: var(--community-dark-100);
    --zone-200: var(--community-dark-200);
    --zone-300: var(--community-dark-300);
    --zone-400: var(--community-dark-400);
    --zone-500: var(--community-dark-500);
    --zone-600: var(--community-dark-600);
    --zone-700: var(--community-dark-700);
    --zone-800: var(--community-dark-800);
    --zone-900: var(--community-dark-900);
}