/* ==========================================================================
   css/tokens.css - Mountainside Aces v2.0 design tokens
   --------------------------------------------------------------------------
   Custom properties only: this file draws nothing on its own, so linking it
   on a legacy page changes nothing.

   Dark mode is a token swap: [data-theme="dark"] (set on <html> by
   js/core/app.js before first paint) redefines the gray ramp, surfaces,
   brand and status colors. Components read the semantic --color-* tokens,
   never the raw ramp, so they follow the theme with no extra rules.

   Legacy names (--primary-color, --card-bg, --text-dark, --shadow-md ...)
   are NOT defined here. theme-toggle.js still writes those inline on :root
   for the unmigrated pages; they get aliased to these tokens in Phase 2 when
   theme-toggle.js and dark-mode.css retire.

   Type: Inter for UI, Bebas Neue for titles and scoreboard numbers. Neither
   font is loaded by this file (loading Inter would restyle legacy pages that
   name it but never load it). v2 pages add the Google Fonts <link>; until
   then the fallbacks below apply.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Gray ramp (6 steps). Swapped in dark mode. ---------------------- */
  --gray-1: #f3f4f1;   /* page background            */
  --gray-2: #e9ebe6;   /* subtle fill, dividers      */
  --gray-3: #cdd1c9;   /* borders                    */
  --gray-4: #8d9389;   /* input borders, icons (3:1) */
  --gray-5: #5a6056;   /* muted text (6.5:1)         */
  --gray-6: #1c201b;   /* body text (16:1)           */

  /* ---- Surfaces ---------------------------------------------------------- */
  --color-page: var(--gray-1);
  --color-surface: #ffffff;               /* cards, tables, dialogs */
  --color-surface-2: var(--gray-2);       /* table header, hover, segmented track */
  --color-border: var(--gray-2);
  --color-border-strong: var(--gray-3);
  --color-border-input: var(--gray-4);    /* form controls need 3:1 */

  /* ---- Text -------------------------------------------------------------- */
  --color-text: var(--gray-6);
  --color-text-muted: var(--gray-5);
  --color-text-faint: var(--gray-4);      /* icons and disabled only, not body copy */
  --color-link: var(--color-brand);

  /* ---- Brand ------------------------------------------------------------- */
  --color-brand: #2d5016;                 /* field green */
  --color-brand-hover: #23400f;
  --color-brand-soft: #e4ecdc;            /* tints, top-10% rank shading */
  --color-on-brand: #ffffff;

  --color-accent: #ffd700;                /* gold, as a fill */
  --color-accent-soft: #fff5c2;           /* "you are here" rows */
  --color-accent-ink: #7a5f00;            /* gold as text on a surface */
  --color-on-accent: #1f1b00;

  /* ---- Status: win, loss, alert ----------------------------------------- */
  --color-win: #1e7a34;
  --color-win-soft: #e2f2e5;
  --color-loss: #b42318;                  /* also the live-game red */
  --color-loss-soft: #fbe5e3;
  --color-alert: #a35200;
  --color-alert-soft: #fcefd9;
  --color-on-status: #ffffff;             /* text on a solid win/loss/alert fill */

  /* ---- Focus, rank shading, loading ------------------------------------- */
  --color-focus: var(--color-brand);
  --color-rank-top: var(--color-brand-soft);
  --color-rank-bottom: #f1f2ef;
  --color-skeleton: var(--gray-2);
  --color-skeleton-shine: rgba(255, 255, 255, 0.6);
  --color-backdrop: rgba(15, 18, 14, 0.55);
  --team-ring: rgba(0, 0, 0, 0.18);       /* keeps Black and White team dots visible */

  /* ---- Team colors -------------------------------------------------------
     --team-<name> matches team-colors.js exactly, so both can load on one
     page. --team-<name>-ink is the text color on that fill (checked 4.5:1).
     White team renders as a white fill with --team-white as its ink. */
  --team-black: #1a1a1a;     --team-black-ink: #ffffff;
  --team-green: #2d7d32;     --team-green-ink: #ffffff;
  --team-red: #d32f2f;       --team-red-ink: #ffffff;
  --team-blue: #1976d2;      --team-blue-ink: #ffffff;
  --team-white: #343a40;     --team-white-ink: #343a40;   --team-white-fill: #ffffff;
  --team-orange: #f57c00;    --team-orange-ink: #1a1a1a;
  --team-silver: #757575;    --team-silver-ink: #ffffff;
  --team-purple: #7b1fa2;    --team-purple-ink: #ffffff;
  --team-gold: #CFB53B;      --team-gold-ink: #1a1a1a;
  --team-carolina: #4b9cd3;  --team-carolina-ink: #1a1a1a;
  --team-army: #654321;      --team-army-ink: #ffffff;
  --team-teal: #008080;      --team-teal-ink: #ffffff;

  /* ---- Type -------------------------------------------------------------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Bebas Neue", "Oswald", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 28px;
  --fs-2xl: 40px;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-base: 1.5;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --tracking-label: 0.06em;               /* small uppercase labels */
  --tracking-display: 0.02em;

  /* ---- Space (4 px steps) ------------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Shape ------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;                       /* cards, buttons, inputs */
  --radius-lg: 12px;                      /* dialogs, sheets */
  --radius-pill: 999px;

  /* Flat surfaces: borders do the work, shadows only for things that float. */
  --elev-1: 0 1px 2px rgba(16, 24, 16, 0.06);
  --elev-2: 0 4px 12px rgba(16, 24, 16, 0.10);
  --elev-3: 0 12px 32px rgba(16, 24, 16, 0.18);

  /* ---- Motion ------------------------------------------------------------ */
  --dur-fast: 150ms;
  --dur-slow: 300ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* ---- Layout ------------------------------------------------------------ */
  --tap-min: 44px;
  --content-max: 1120px;
  --gutter: 16px;
  --z-sticky: 10;
  --z-header: 100;
  --z-sheet: 900;
  --z-toast: 10000;                       /* matches js/ui/toast.js */
}

:root[data-theme="dark"] {
  color-scheme: dark;

  /* Charcoal page, near-black cards. */
  --gray-1: #202320;
  --gray-2: #2b2f2b;
  --gray-3: #434842;
  --gray-4: #7f857c;
  --gray-5: #a7ada4;
  --gray-6: #eceee9;

  --color-surface: #141614;

  --color-link: #8fcf7a;
  --color-brand: #5aa548;
  --color-brand-hover: #6db85a;
  --color-brand-soft: #1d3317;
  --color-on-brand: #0b1608;

  --color-accent-soft: #3a3208;
  --color-accent-ink: #ffd700;

  --color-win: #4cc46a;
  --color-win-soft: #163a1f;
  --color-loss: #f2766b;
  --color-loss-soft: #4a1f1b;
  --color-alert: #f0a630;
  --color-alert-soft: #45300e;
  --color-on-status: #141614;

  --color-focus: #ffd700;
  --color-rank-bottom: #1b1d1b;
  --color-skeleton-shine: rgba(255, 255, 255, 0.06);
  --color-backdrop: rgba(0, 0, 0, 0.65);
  --team-ring: rgba(255, 255, 255, 0.3);

  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --elev-2: 0 4px 12px rgba(0, 0, 0, 0.5);
  --elev-3: 0 12px 32px rgba(0, 0, 0, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-slow: 0ms;
  }
}