/* =====================================================================
   MatchStats Online — design tokens (ADR 0022)
   ---------------------------------------------------------------------
   Load this FIRST, before mso.css / forms.css.
   Visual reference: docs/design/token-preview.html

   Three tiers:
     1. Primitives   raw palette + scales. Never referenced by page or
                     component CSS. Only tier 2 points at these.
     2. Semantic     what pages and components use (--color-text,
                     --space-4, --radius-md ...). Themes swap these.
     3. Legacy       aliases for the old variable names so existing
                     pages keep working while you migrate. Delete when
                     grep finds no more uses.

   Rule for every other stylesheet (global and shadow DOM):
     no hex / rgb / named colors, no px/rem font sizes, no ad hoc
     padding/margin/radius values. If a value you need doesn't exist,
     add a token here rather than hard-coding it. Existing raw values
     are converted as files are touched; spa/typescript/app/styleTokens.test.ts
     stops new ones.

   Theme switch: html[data-theme="dark"] (as today). Any element can
   also carry data-theme to force a theme on a subtree.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. PRIMITIVES
   --------------------------------------------------------------------- */
:root {
  /* Neutrals: cool slate, faint blue cast */
  --slate-0:   #ffffff;
  --slate-50:  #f6f7f9;
  --slate-100: #eceef2;
  --slate-200: #dce0e6;
  --slate-300: #c2c8d0;
  --slate-400: #98a1ad;
  --slate-450: #848d99;
  --slate-500: #6d7784;
  --slate-600: #515a66;
  --slate-700: #39404a;
  --slate-800: #2a3038;
  --slate-850: #22272e;
  --slate-900: #1b1f25;
  --slate-950: #13161a;

  /* Brand accent: range copper (one hue, both themes) */
  --copper-50:  #fdf3ec;
  --copper-100: #fae0cf;
  --copper-200: #f4c09d;
  --copper-300: #eda06f;
  --copper-400: #e5834a;
  --copper-500: #cc6830;
  --copper-600: #a95322;
  --copper-700: #87411b;
  --copper-800: #643116;
  --copper-900: #3a1f10;

  /* Status hues */
  --red-100: #fde4e1;  --red-300: #f8a197;  --red-400: #f27a6d;
  --red-600: #c0392b;  --red-700: #9d2c20;  --red-900: #3d1a17;

  --amber-100: #fdf0d2; --amber-300: #f5c96f; --amber-400: #eab14a;
  --amber-600: #865b04; --amber-700: #7a5405; --amber-900: #3a2c0c;

  --green-100: #dcf3e5; --green-300: #84d6a4; --green-400: #5cc184;
  --green-600: #1e7444; --green-700: #1b663b; --green-900: #14301f;

  --blue-100: #e0ebfc;  --blue-300: #93baf5;  --blue-400: #6c9ef0;
  --blue-600: #2f68c4;  --blue-700: #24529c;  --blue-900: #172843;

  /* Podium (standings, awards) */
  --gold-400:   #d4a72c;
  --silver-400: #a8b0ba;
  --bronze-400: #b87545;
}


/* ---------------------------------------------------------------------
   2. SEMANTIC — theme-independent scales
   --------------------------------------------------------------------- */
:root {
  /* Type
     Self-host Inter (or Barlow / IBM Plex Sans) and it takes over;
     until then the system stack is used. */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);   /* swap for a condensed face if wanted */
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  /* 1.2-ish scale. Six steps cover the site; resist adding more. */
  --text-xs:   0.75rem;   /* 12  captions, floated labels, footnotes  */
  --text-sm:   0.875rem;  /* 14  secondary text, table cells, helpers */
  --text-md:   1rem;      /* 16  body, inputs, buttons                */
  --text-lg:   1.25rem;   /* 20  card / section titles                */
  --text-xl:   1.5rem;    /* 24  page titles, site name               */
  --text-2xl:  2rem;      /* 32  hero numbers (score, rank)           */
  --text-3xl:  2.75rem;   /* 44  single big stat on a dashboard tile  */

  /* The 10-foot view (a TV across the lounge, events pilot). The display fits its rows to the screen: the row text is
     the smaller of a width cap (cq units of the display's sides) and the height left divided by the taller side's
     rows, in row heights (match.css, .tvSide), after the rows' pixel borders. The other TV sizes are relative to that
     row text. */
  --text-tv-row-max: 1.95cqw;
  --tv-row-height:   1.7;   /* a row, in row-text ems: line 1.2 + padding 0.5 (its 1px border is counted apart) */
  --tv-head-height:  3.5;   /* a side's heading (name, attendance) and column labels, in row-text ems */
  --text-tv-label:   0.6em;
  --text-tv-head:    1.3em;
  --text-tv-score:   1.5em;
  --text-tv-rank:    0.7em;
  --text-tv-footer:  clamp(0.875rem, 1.1vw, 1.5rem);
  /* After the match (criterion 52): a card's heading, and a finding's row text cap (few rows, so bigger than a side's). */
  --text-tv-heading: clamp(1.5rem, 3vw, 4rem);
  --text-tv-card-max: 3.2cqw;
  /* Nothing important near a TV's edges (overscan): */
  --tv-safe:       3vw;   /* left and right */
  --tv-safe-block: 3vh;   /* top and bottom: overscan is a share of each side, and height is what the rows need */

  --leading-tight: 1.2;   /* headings, stat numbers */
  --leading-normal: 1.5;  /* body */

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

  --tracking-caps: 0.06em;  /* for small uppercase labels/eyebrows */

  /* Spacing: 4px base */
  --space-0:  0;
  --space-1:  0.25rem;  /*  4 */
  --space-2:  0.5rem;   /*  8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */

  /* Radius */
  --radius-sm:   4px;     /* inputs, tags, table chips */
  --radius-md:   8px;     /* buttons, cards, menus     */
  --radius-lg:   12px;    /* dialogs, main panel       */
  --radius-full: 999px;   /* pills, avatars            */

  /* Borders */
  --border-width: 1px;
  --border-width-strong: 2px;

  /* Control sizing (buttons, inputs, selects share these) */
  --control-h-sm: 2rem;     /* 32 */
  --control-h-md: 2.5rem;   /* 40 */
  --control-h-lg: 3rem;     /* 48 — also the minimum touch target on mobile */
  --control-px:   var(--space-4);

  /* Icons */
  --icon-sm: 1rem;
  --icon-md: 1.25rem;
  --icon-lg: 1.5rem;

  /* Layout */
  --content-max:    80rem;  /* 1280 tables, dashboards */
  --content-medium: 60rem;  /*  960 mixed pages        */
  --content-narrow: 40rem;  /*  640 forms, onboarding  */
  --header-h: 3.5rem;
  --phone-bar-h: calc(var(--control-h-lg) + var(--space-2)); /* the site menu's bottom bar on a phone: a touch target and a margin */
  --gutter: var(--space-6);
  --dashboard-columns: 3;
  --dashboard-gap: var(--space-4);

  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0, 0, .2, 1);

  /* Stacking */
  --z-dropdown: 10;
  --z-sticky:   20;
  --z-header:   30;
  --z-overlay:  100;
  --z-dialog:   110;
  --z-toast:    120;
  --z-tooltip:  130;
}

@media (max-width: 767px) {
  :root {
    --gutter: var(--space-4);
    --dashboard-columns: 1;
  }
}

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


/* ---------------------------------------------------------------------
   2b. SEMANTIC — colors, LIGHT (default)
   --------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces, back to front */
  --color-chrome:         var(--slate-0);    /* header / footer / nav   */
  --color-bg:             var(--slate-100);  /* page canvas             */
  --color-surface:        var(--slate-0);    /* cards, panels           */
  --color-surface-sunken: var(--slate-50);   /* wells, table stripes    */
  --color-surface-raised: var(--slate-0);    /* menus, dialogs, popovers (+ shadow) */
  --color-surface-hover:  var(--slate-100);  /* row / menu item hover   */
  --color-tv-bg:          var(--slate-0);    /* the lounge display      */
  --color-tv-stripe:      var(--slate-100);  /* its alternate rows      */
  --color-overlay:        rgb(19 22 26 / .55); /* dialog backdrop       */
  --color-chrome-glass:   rgb(255 255 255 / .82); /* blurred menus     */

  /* Lines */
  --color-border:         var(--slate-200);
  --color-border-strong:  var(--slate-300);  /* dividers that must show */
  --color-border-input:   var(--slate-450);  /* form control outlines (3:1 non-text contrast) */

  /* Text */
  --color-text:           var(--slate-900);
  --color-text-muted:     var(--slate-600);  /* labels, secondary info  */
  --color-text-subtle:    var(--slate-500);  /* placeholders, timestamps (non-essential only) */
  --color-text-disabled:  var(--slate-400);
  --color-text-inverse:   var(--slate-0);

  /* Brand accent */
  --color-accent:         var(--copper-600); /* links, active nav, primary fill */
  --color-accent-hover:   var(--copper-700);
  --color-accent-soft:    var(--copper-50);  /* selected row, active tab bg */
  --color-accent-border:  var(--copper-200);
  --color-on-accent:      var(--slate-0);    /* text/icons on accent fill */
  --color-focus-ring:     var(--copper-600); /* 3:1 or better against the page and surfaces (WCAG 1.4.11) */

  /* Status: -fg for text/icons, -bg for tinted panels, -border for outlines */
  --color-danger:         var(--red-600);
  --color-danger-hover:   var(--red-700);
  --color-danger-bg:      var(--red-100);
  --color-danger-border:  var(--red-300);
  --color-on-danger:      var(--slate-0);

  --color-warning:        var(--amber-600);
  --color-warning-bg:     var(--amber-100);
  --color-warning-border: var(--amber-300);

  --color-success:        var(--green-600);
  --color-success-bg:     var(--green-100);
  --color-success-border: var(--green-300);

  --color-info:           var(--blue-600);
  --color-info-bg:        var(--blue-100);
  --color-info-border:    var(--blue-300);

  /* The platform admin's elevation banner: loud on purpose, the same in both themes. */
  --color-elevation:      var(--amber-600);
  --color-on-elevation:   var(--slate-0);

  /* Data / stats */
  --color-rank-1: var(--gold-400);
  --color-rank-2: var(--silver-400);
  --color-rank-3: var(--bronze-400);
  --color-on-rank: var(--slate-950);  /* text on a podium fill, both themes */
  --color-stat-up:   var(--green-600);
  --color-stat-down: var(--red-600);
  /* A value that just changed on the lounge display: a glow inside the cell's border that bleeds into the cell, in the
     brand's copper, so nothing moves and an emptied cell shows it too; the team score (copper text) gets a halo.
     Each "off" has the same shape as its "on", so the fade can animate between them. */
  --color-changed:    var(--color-accent);
  --glow-changed:     inset 0 0 0 var(--border-width-strong) var(--color-changed), inset 0 0 20px color-mix(in srgb, var(--color-changed) 55%, transparent);
  --glow-changed-off: inset 0 0 0 0 transparent, inset 0 0 0 transparent;
  --halo-changed:     0 0 6px color-mix(in srgb, var(--color-changed) 80%, transparent), 0 0 28px color-mix(in srgb, var(--color-changed) 60%, transparent);
  --halo-changed-off: 0 0 0 transparent, 0 0 0 transparent;

  /* Elevation */
  --shadow-1: 0 1px 2px rgb(19 22 26 / .06), 0 1px 3px rgb(19 22 26 / .08);
  --shadow-2: 0 4px 12px rgb(19 22 26 / .10), 0 2px 4px rgb(19 22 26 / .06);
  --shadow-3: 0 12px 32px rgb(19 22 26 / .16), 0 4px 8px rgb(19 22 26 / .08);
  /* A gap in the surface colour, then a solid ring: visible next to any fill, including the accent's own. */
  --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-focus-ring);
}


/* ---------------------------------------------------------------------
   2c. SEMANTIC — colors, DARK
   --------------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  --color-chrome:         var(--slate-950);
  --color-bg:             var(--slate-900);
  --color-surface:        var(--slate-850);
  --color-surface-sunken: var(--slate-900);
  --color-surface-raised: var(--slate-800);
  --color-surface-hover:  var(--slate-800);
  --color-tv-bg:          var(--slate-900);
  --color-tv-stripe:      var(--slate-800);
  --color-overlay:        rgb(0 0 0 / .65);
  --color-chrome-glass:   rgb(19 22 26 / .82);

  --color-border:         var(--slate-700);
  --color-border-strong:  var(--slate-600);
  --color-border-input:   var(--slate-500);

  --color-text:           var(--slate-50);
  --color-text-muted:     var(--slate-400);
  --color-text-subtle:    var(--slate-450);
  --color-text-disabled:  var(--slate-600);
  --color-text-inverse:   var(--slate-950);

  --color-accent:         var(--copper-400);
  --color-accent-hover:   var(--copper-300);
  --color-accent-soft:    color-mix(in srgb, var(--copper-400) 14%, var(--slate-850));
  --color-accent-border:  var(--copper-700);
  --color-on-accent:      var(--slate-950);
  --color-focus-ring:     var(--copper-400);

  --color-danger:         var(--red-400);
  --color-danger-hover:   var(--red-300);
  --color-danger-bg:      var(--red-900);
  --color-danger-border:  var(--red-700);
  --color-on-danger:      var(--slate-950);

  --color-warning:        var(--amber-400);
  --color-warning-bg:     var(--amber-900);
  --color-warning-border: var(--amber-700);

  --color-success:        var(--green-400);
  --color-success-bg:     var(--green-900);
  --color-success-border: var(--green-700);

  --color-info:           var(--blue-400);
  --color-info-bg:        var(--blue-900);
  --color-info-border:    var(--blue-700);

  --color-stat-up:   var(--green-400);
  --color-stat-down: var(--red-400);
  --color-changed:    var(--color-accent);

  /* Shadows read weakly on dark; lean on surface steps + a hairline */
  --shadow-1: 0 1px 2px rgb(0 0 0 / .40);
  --shadow-2: 0 4px 12px rgb(0 0 0 / .45), 0 0 0 1px rgb(255 255 255 / .04);
  --shadow-3: 0 12px 32px rgb(0 0 0 / .55), 0 0 0 1px rgb(255 255 255 / .05);
}

/* Optional: follow the OS when the user hasn't chosen.
   Only enable if the theme toggle writes data-theme="light" explicitly
   (not just removes the attribute), otherwise "light" can't override
   a dark OS. Copy the dark block's declarations in here if you turn it on.
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { ... }
}
*/


/* ---------------------------------------------------------------------
   3. LEGACY ALIASES — remove once nothing references them
   (also fixes the two names that were used but never defined:
    --font-color and --background-color)
   --------------------------------------------------------------------- */
:root,
[data-theme="light"],
[data-theme="dark"] {
  --text-color:            var(--color-text);
  --accent-text:           var(--color-text-muted);
  --bg-color:              var(--color-bg);
  --theme-color:           var(--color-accent);
  --bar-color:             var(--color-chrome);
  --bar-color-transparent: var(--color-chrome-glass);
  --content-color:         var(--color-surface);
  --btn-primary:           var(--color-accent);
  --btn-warn:              var(--color-danger);
  --font-color:            var(--color-text);
  --background-color:      var(--color-bg);
  --constrained-max:       var(--content-max);
  --constrained-single:    var(--content-medium);
}


/* ---------------------------------------------------------------------
   Base element defaults that every page should get.
   Custom properties and inherited properties (font, color) reach into
   shadow roots; these selectors don't. Components that need them repeat
   them in their own CSS until a shared component sheet exists.
   --------------------------------------------------------------------- */
html {
  font-family: var(--font-sans);
  font-size: 100%;
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-chrome);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Numbers line up in columns everywhere; opt out with .proportional */
table, .stat, [data-numeric] { font-variant-numeric: tabular-nums; }

/* Ring only: the element keeps its own shape (pills stay round). The transparent outline is drawn in Windows' high
   contrast mode, where box shadows aren't. */
:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
}

::selection { background: var(--color-accent-soft); color: var(--color-text); }