/* Diamond Commander v2 - design tokens (redesign 2026-07-07, research-driven)
 * Direction: "Broadcast-grade dugout companion". Navy chrome + a lit, mow-striped
 * diamond form the stage; ONE hot clay CTA shouts; each team paints its own
 * identity color (--team) across accents. Numbers hit like a scorebug; controls
 * are glove-sized; status reads as icon + label + color, sun- and colorblind-safe.
 * Primitive -> semantic layering so a future Next.js/Tailwind port maps 1:1.
 */
:root {
  color-scheme: light;
  /* ---- Type ---- */
  --font-display: "Archivo", -apple-system, "Segoe UI", Roboto, sans-serif;  /* scoreboard / headings / ALL standalone numbers + codes */
  --font-body: "Barlow", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --tracking-tight: -.02em;
  --tracking-wide: .08em;
  /* Type scale: size / line-height / weight (apply family per use). Never a lineup
     number/position code below 15px; grid cell text 16-17px/800. */
  --fs-hero: 34px;    /* auth logo, big empty-state */
  --fs-stat: 40px;    /* hero scorebug numbers */
  --fs-h1: 24px;      /* page titles */
  --fs-h2: 19px;      /* card + modal titles */
  --fs-lg: 17px;      /* btn-lg, one-inning position label */
  --fs-body: 16px;    /* body + inputs (16px kills iOS zoom) */
  --fs-sm: 14px;
  --fs-eyebrow: 11.5px;

  /* ---- Diamond Commander chrome: logo navy, field green, aged gold ---- */
  --navy: #102720;
  --navy-2: #183c32;
  --navy-3: #265343;
  --on-navy: #fff9e9;
  --on-navy-soft: #d8d0b2;

  /* ---- Accent (trust / links) + the one CTA ---- */
  --accent: #1e6a4c;          /* field green: links, focus, active controls */
  --accent-press: #14513a;
  --accent-soft: #e5f1e8;
  --accent-ink: #104d36;
  --accent-line: #a9d0b7;
  --field: #378355;           /* switch on-state / success energy */
  --field-soft: #e7f4e9;
  --clay: #b68a3f;            /* aged-gold CTA, drawn from the logo trim */
  --clay-top: #d5b566;
  --clay-press: #836123;
  --clay-soft: #fbf2dc;
  --on-clay: #182018;

  /* ---- Team identity (COACH-SET at onboarding; overridden inline per team) ---- */
  --team: #1e6a4c;
  --team-ink: #ffffff;        /* text that sits on --team (white or #101828 by luminance) */
  --team-soft: #e5f1e8;
  --team-2: #173f35;          /* secondary team color (accents + identity stripe) */
  --team-3: #b68a3f;          /* tertiary team color (accents + identity stripe) */

  /* ---- Neutrals / surfaces ---- */
  --page-backdrop: #d9ddd2;
  --bg: #eff1e9;
  --bg-2: #e4e8de;
  --surface: #fffdf6;
  --surface-2: #f6f6ef;
  --ink: #172018;             /* near-black, sun-hard (~15:1) */
  --ink-soft: #4b5b4e;        /* secondary (~7:1) */
  --ink-faint: #687669;       /* tertiary, still AA (~4.6:1) - never load-bearing */
  --line: #dce1d5;
  --line-strong: #c5cec0;

  /* ---- Status: three-channel (icon + label + color), sun & colorblind safe ---- */
  --danger: #c81e1e;          /* hard-rule (no-go) breaks ONLY */
  --danger-ink: #b91c1c;      /* readable text on a light danger surface */
  --danger-soft: #fef2f2;
  --ok: #15803d;              /* pass */
  --ok-soft: #ecfdf3;
  --warn: #e69f00;            /* Wong high-luminance amber (heads-up) */
  --warn-ink: #8a5a00;        /* readable text on a light warning surface */
  --warn-soft: #fff7e6;

  /* ---- Position groups: GRID cells = SOLID saturated fill + WHITE ink (sun) ---- */
  --if: #175943;    --if-ink: #ffffff;   /* infield  */
  --of: #397e4d;    --of-ink: #ffffff;   /* outfield */
  --neu: #334e60;   --neu-ink: #ffffff;  /* neutral: catcher / real pitcher */
  --sit: #9b6b25;   --sit-ink: #ffffff;  /* bench */
  /* Soft chip variants for PILLS in the card list (tinted bg + dark ink) */
  --chip-if: #dcefe4;  --chip-if-ink: #164e3b;
  --chip-of: #e0f0df;  --chip-of-ink: #245d35;
  --chip-neu: #e4eceb; --chip-neu-ink: #2d4c58;

  /* ---- Field-diagram overlays: fixed and independent of team branding ----
   * The diamond itself is a shared visual, so player labels must never inherit
   * a coach-selected team color. These values also stay fixed in dark mode: a
   * light name plate on the turf is easier to scan quickly from the dugout. */
  --fielder-marker-if: #154f3c;
  --fielder-marker-of: #1f5d40;
  --fielder-marker-neu: #1d4d61;
  --fielder-marker-ink: #fffdf6;
  --fielder-marker-ring: #fffdf6;
  --fielder-name-bg: #fffdf6;
  --fielder-name-ink: #102720;
  --fielder-name-line: #9cad9f;
  --fielder-name-focus: #8b641f;

  /* ---- Field SVG palette (the beautiful diamond) ---- */
  --turf-lit: #4f9e46;
  --turf-shade: #58ab4d;
  --mow-a: #5aa84f;
  --mow-b: #55a049;
  --clay-dirt: #cd9f63;
  --clay-dirt-2: #c2914f;
  --chalk: #f4f1e8;

  /* ---- Radii: nested, never one value everywhere ---- */
  --r-xl: 18px;   /* sheets, hero panels */
  --r-lg: 14px;   /* cards, grid-wrap */
  --r: 12px;      /* buttons, inputs */
  --r-sm: 10px;   /* small buttons, chip toggles */
  --r-xs: 8px;    /* focus ring, tags */
  --r-pill: 999px;
  --gap: 8px;

  /* ---- Elevation: two-layer tinted shadows + a 1px top highlight (lit panels) ---- */
  --shadow-sm: 0 1px 2px rgba(16,39,32,.08), 0 1px 3px rgba(16,39,32,.10);
  --shadow-md: 0 6px 18px rgba(16,39,32,.11), 0 2px 6px rgba(16,39,32,.07);
  --shadow-lg: 0 18px 44px rgba(16,39,32,.22);
  --card-highlight: inset 0 1px 0 rgba(255,255,255,.6);
  --cta-shadow: 0 2px 0 var(--clay-press), 0 6px 16px rgba(182,138,63,.30);
  --ring: 0 0 0 3px rgba(30,106,76,.28);

  /* ---- Motion: fast, spring-flavored, transform/opacity only ---- */
  --t: 150ms cubic-bezier(.2,.8,.2,1);        /* hovers / toggles (ease-out) */
  --t-slow: 320ms cubic-bezier(.2,.7,.3,1);   /* sheet + marker slides, inning change */
  --spring: cubic-bezier(.34,1.56,.64,1);     /* toast / menu pop-in */

  --maxw: 1140px;
  --rail-w: 234px;

  /* ---- Atmosphere (subtle field texture on the shell only) ---- */
  --field-mesh:
    radial-gradient(900px 460px at 100% -8%, rgba(30,106,76,.13), transparent 60%),
    radial-gradient(760px 420px at -6% 110%, rgba(182,138,63,.11), transparent 58%);
}

/* Read-only SHARE surfaces (.share-page) always use the fixed, high-contrast
   light document palette, never the viewer's dark theme, so a shared lineup
   reads the same for every family. Dark tokens apply normally as the fallback
   for browsers without `:has()`; modern browsers selectively restore the
   light share-surface tokens below. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --navy: #0b1713;
  --navy-2: #10271f;
  --navy-3: #1a3a2e;
  --on-navy: #fff8e5;
  --on-navy-soft: #d4ceb7;
  --accent: #63be86;
  --accent-press: #3e9a67;
  --accent-soft: #163d2b;
  --accent-ink: #b7efc9;
  --accent-line: #39775a;
  --field: #6ac98a;
  --field-soft: #173c2a;
  --clay: #d3ad5a;
  --clay-top: #e2c275;
  --clay-press: #906b29;
  --clay-soft: #392e1a;
  --on-clay: #172019;
  --team: #63be86;
  --team-ink: #10251a;
  --team-soft: #163d2b;
  --team-2: #2d7652;
  --team-3: #d3ad5a;
  --page-backdrop: #07100c;
  --bg: #0d1711;
  --bg-2: #111e16;
  --surface: #16231b;
  --surface-2: #1d2d23;
  --ink: #f7f1df;
  --ink-soft: #c0c9bb;
  --ink-faint: #98a798;
  --line: #2d4135;
  --line-strong: #405646;
  --danger: #ff8787;
  --danger-ink: #ff8787;
  --danger-soft: #3c1e20;
  --ok: #75d69a;
  --ok-soft: #173c2a;
  --warn: #f2bd58;
  --warn-ink: #f2bd58;
  --warn-soft: #3a301c;
  --if: #247653; --of: #397e4d; --neu: #486779; --sit: #9b6b25;
  --chip-if: #193f2e; --chip-if-ink: #b9efd0;
  --chip-of: #1d4127; --chip-of-ink: #c4edbc;
  --chip-neu: #203843; --chip-neu-ink: #c4dce5;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.28), 0 1px 3px rgba(0,0,0,.22);
  --shadow-md: 0 6px 18px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.22);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.48);
  --card-highlight: inset 0 1px 0 rgba(255,255,255,.05);
  --cta-shadow: 0 2px 0 var(--clay-press), 0 6px 16px rgba(0,0,0,.34);
  --ring: 0 0 0 3px rgba(99,190,134,.32);
  --field-mesh:
    radial-gradient(900px 460px at 100% -8%, rgba(54,124,79,.22), transparent 60%),
    radial-gradient(760px 420px at -6% 110%, rgba(211,173,90,.12), transparent 58%);
}

@supports selector(:has(*)) {
  :root:has(.share-page) { color-scheme: light !important; }
  :root[data-theme="dark"]:has(.share-page) {
    --page-backdrop: #d9ddd2;
    --bg: #eff1e9;
    --bg-2: #e4e8de;
    --surface: #fffdf6;
    --surface-2: #f6f6ef;
    --ink: #172018;
    --ink-soft: #4b5b4e;
    --ink-faint: #687669;
    --line: #dce1d5;
    --line-strong: #c5cec0;
    --shadow-sm: 0 1px 2px rgba(16,39,32,.08), 0 1px 3px rgba(16,39,32,.10);
    --shadow-md: 0 6px 18px rgba(16,39,32,.11), 0 2px 6px rgba(16,39,32,.07);
    --shadow-lg: 0 18px 44px rgba(16,39,32,.22);
    --card-highlight: inset 0 1px 0 rgba(255,255,255,.6);
    --field-mesh:
      radial-gradient(900px 460px at 100% -8%, rgba(30,106,76,.13), transparent 60%),
      radial-gradient(760px 420px at -6% 110%, rgba(182,138,63,.11), transparent 58%);
  }
}