/* =============================================================================
   UltiGameMate v2 — design tokens (single source of truth)
   Dark theme by default; `:root[data-theme='light']` below overrides the
   colour tokens. The head script in layouts/base.liquid sets data-theme from
   the profile's Appearance choice, else the OS preference.
   Loaded after fonts.css, before everything else.
   ============================================================================= */

:root {
  color-scheme: dark;

  /* --- typefaces -----------------------------------------------------------
     Paper Mono carries structure: headings, nav, buttons, labels, stats,
     scores, chips. Nebula Sans carries running prose so long text stays
     readable. Both self-hosted (fonts.css). */
  --font-mono: 'Paper Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
  --font-body:
    'Nebula Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-ui: var(--font-mono); /* app chrome */
  --font-display: var(--font-mono); /* headings */

  /* --- type scale (fluid; mono-aware, ~15.5→16.5px body) ------------------ */
  --fz-2xs: 0.75rem; /* 12 — tab labels, micro-labels only */
  --fz-xs: 0.8125rem; /* 13 — overlines, chips, meta */
  --fz-sm: 0.875rem; /* 14 — captions, table cells, secondary */
  --fz-body: clamp(0.9375rem, 0.9rem + 0.18vw, 1rem); /* 15→16 body copy */
  --fz-md: clamp(1rem, 0.965rem + 0.16vw, 1.0625rem); /* 16→17 */
  --fz-lg: clamp(1.0625rem, 1rem + 0.32vw, 1.25rem); /* 17→20 — h3 / card lead */
  --fz-xl: clamp(1.3125rem, 1.15rem + 0.72vw, 1.75rem); /* 21→28 — h2 */
  --fz-2xl: clamp(1.625rem, 1.35rem + 1.25vw, 2.375rem); /* 26→38 — h1 / screen title */
  --fz-3xl: clamp(2rem, 1.55rem + 2vw, 3rem); /* 32→48 — marketing hero */

  --lh-tight: 1.1; /* display headings */
  --lh-snug: 1.28; /* h3/h4, card titles, chips */
  --lh-ui: 1.4; /* dense UI text */
  --lh-body: 1.65; /* prose */

  --tracking-tight: -0.02em; /* big mono headings */
  --tracking-over: 0.1em; /* overline / section labels (sans, so lighter) */
  --tracking-label: 0.02em; /* tab + button labels */

  /* --- surfaces (off pure black, soft) ----------------------------------- */
  --bg-page: #141417;
  --bg-sunken: #0f0f12;
  --bg-card: #1c1c21;
  --bg-elevated: #26262c;
  --bg-input: #2b2b32;

  /* --- lines (used sparingly — mostly separation is by surface + space) -- */
  --line: #2c2c33;
  --line-strong: #3a3a43;

  /* --- text ----------------------------------------------------------------
     primary = headings + emphasis · body = paragraphs · secondary = support
     · muted = meta/labels. Never pure #fff (glare on near-black) — even the
     brightest tokens sit a few points below white. */
  --text-heading: #dcdce3; /* big display headings — softer than primary */
  --text-primary: #e6e6ec; /* emphasis, values, team names */
  --text-body: #bcbcc6;
  --text-secondary: #9595a0;
  --text-muted: #6a6a75;

  /* --- brand + semantic accents ---------------------------------------- */
  --accent: #2d6a4f; /* brand green — fills, active states */
  --accent-hi: #52b788; /* brighter green — links, values, on-dark text */
  --accent-lo: #40916c;
  --accent-bright: #6fd6a6; /* hover/active lift on green fills */
  --accent-wash: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-ink: #06140d; /* text on a green fill */

  --gold: #ffd166; /* boosts */
  --gold-wash: color-mix(in srgb, var(--gold) 15%, transparent);
  --pos: #3ecf8e; /* points / positive */
  --pos-wash: color-mix(in srgb, var(--pos) 15%, transparent);
  --neg: #ff5c5c;
  --info: #4aa3ff;
  --silver: #cdd3dc; /* rank medals */
  --bronze: #e2a57c;
  --ink-on-bright: #0f0f12; /* text on gold / mint fills — dark in both themes */

  /* hairline rims + hover washes: white-alpha on dark, black-alpha on light */
  --rim-rgb: 255 255 255;
  --shade: rgb(0 0 0 / 0.5); /* deep shade in dents / pressed tags */

  /* --- spacing (4-based) ---------------------------------------------- */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 72px;

  /* one gap between stacked page sections */
  --gap-section: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);

  /* --- flow: em-relative rhythm for stacked text (margins between blocks) */
  --flow-3xs: 0.4em;
  --flow-2xs: 0.6em;
  --flow-xs: 0.8em;
  --flow-sm: 1em;
  --flow-md: 1.2em;
  --flow-lg: 1.6em;
  --flow-xl: 2.75em;

  /* --- pad: em-relative interior padding for controls / chips / cards --- */
  --pad-3xs: 0.15em;
  --pad-2xs: 0.25em;
  --pad-xs: 0.35em;
  --pad-sm: 0.5em;
  --pad-md: 0.65em;
  --pad-lg: 0.8em;
  --pad-xl: 0.95em;
  --pad-2xl: 1.2em;
  --pad-3xl: 1.6em;

  /* --- gap: em-relative inline gap (icon <-> label) ------------------- */
  --gap-2xs: 0.3em;
  --gap-xs: 0.4em;
  --gap-sm: 0.5em;

  /* --- list indent -------------------------------------------------- */
  --indent-list: 1.4em;

  /* --- icon sizes (was scattered as raw px in components.css) ---------- */
  --icon-sm: 14px;
  --icon-md: 18px;
  --icon-lg: 24px;
  --border-hairline: 1px;

  /* --- radii ------------------------------------------------------------ */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* --- elevation ------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 16px 40px -12px rgb(0 0 0 / 0.55);
  --ring: 0 0 0 2px color-mix(in srgb, var(--accent-hi) 55%, transparent);

  /* --- layout widths ------------------------------------------------------
     prose = reading column · app = content beside the sidebar ·
     wide = marketing sections + footer. */

  /* --w-prose: 42rem; */
  --w-app: 75rem; /* every app screen — wide enough for the picks fixture list */
  --w-wide: 72rem;
  --sidebar-w: 244px;
  --tabbar-h: 60px;
  --pad-inline: clamp(1rem, 0.5rem + 2.5vw, 2rem);

  /* --- breakpoints (reference; @media queries still use the literal) --- */
  --bp-md: 48rem;
  --bp-lg: 64rem;

  /* --- motion -------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 0.14s;

  /* --- gradients ------------------------------------------------------
     Brand green -> mint for fills, gold for boosts. --grad-text is for
     display titles clipped to text (white fading to secondary). */
  --grad-accent: linear-gradient(
    135deg,
    var(--accent-bright) 0%,
    var(--accent-hi) 45%,
    var(--accent-lo) 100%
  );
  --grad-gold: linear-gradient(135deg, #ffe29a 0%, var(--gold) 50%, #e8a93a 100%);
  --grad-text: linear-gradient(180deg, #f2f2f6 0%, var(--text-heading) 45%, #a4a4b0 100%);
  --grad-text-accent: linear-gradient(135deg, #f2f2f6 10%, var(--accent-bright) 100%);
  --aurora:
    radial-gradient(
      60rem 28rem at 12% -8%,
      color-mix(in srgb, var(--accent-hi) 11%, transparent),
      transparent 70%
    ),
    radial-gradient(
      44rem 22rem at 92% -6%,
      color-mix(in srgb, var(--accent) 14%, transparent),
      transparent 70%
    );

  /* --- edges: 1px "shiny" borders -----------------------------------
     Painted as the border-box layer of the surface system (style.css), so
     they follow border-radius without pseudo-elements. One light source for
     the whole UI: top-left. Edges catch it on the top-left rim and fall
     into shade bottom-right — a bevel. */
  --edge: linear-gradient(
    145deg,
    rgb(255 255 255 / 0.12) 0%,
    rgb(255 255 255 / 0.04) 45%,
    rgb(0 0 0 / 0.2) 100%
  );
  --edge-hover: linear-gradient(
    145deg,
    rgb(255 255 255 / 0.2) 0%,
    rgb(255 255 255 / 0.06) 45%,
    rgb(0 0 0 / 0.22) 100%
  );

  /* clickable surfaces: at rest the same faint lit edge as read-only
     containers — the raised shadow alone says "tappable" — firming up to a
     plain --line border on hover */
  --edge-clickable: var(--edge);
  --edge-clickable-hover: linear-gradient(var(--line), var(--line));
  --edge-accent: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-bright) 80%, transparent) 0%,
    color-mix(in srgb, var(--accent) 30%, transparent) 100%
  );
  --edge-gold: linear-gradient(
    180deg,
    color-mix(in srgb, var(--gold) 85%, transparent) 0%,
    color-mix(in srgb, var(--gold) 25%, transparent) 100%
  );

  /* read-only "dent" (inset neumorphism): pressed into the page — the
     no-click counterpart of a raised surface (components.css). Everything
     is the raised recipe mirrored: shadow inside the TOP edge instead of a
     sheen, an edge dark at the top and lit along the BOTTOM lip, and a fill
     a shade below the page that lightens towards the bottom. */
  --bg-dent: color-mix(in srgb, var(--bg-sunken) 30%, var(--bg-page));
  --dent-fill: linear-gradient(
    145deg,
    color-mix(in srgb, var(--bg-sunken) 60%, var(--bg-page)) 0%,
    var(--bg-dent) 40%,
    color-mix(in srgb, var(--bg-dent) 93%, white) 100%
  );
  --edge-dent: linear-gradient(
    145deg,
    rgb(0 0 0 / 0.3) 0%,
    rgb(255 255 255 / 0.015) 55%,
    rgb(255 255 255 / 0.06) 100%
  );
  --shadow-dent: inset 2px 2px 5px rgb(0 0 0 / 0.32), inset -1px -1px 3px rgb(255 255 255 / 0.025);

  /* --- raised (outer neumorphism) — clickable surfaces ------------------
     Extruded from the page by the same top-left light the dents use: a
     faint rim-light off the top-left side, a soft cast shadow falling
     bottom-right, a tight contact shadow underneath, and a domed fill
     (--sheen-convex). Hover lifts higher; :active presses into a dent. */
  --sheen-convex: linear-gradient(
    145deg,
    rgb(255 255 255 / 0.06) 0%,
    rgb(255 255 255 / 0.015) 40%,
    rgb(0 0 0 / 0.14) 100%
  );
  --shadow-raised:
    -4px -4px 10px rgb(255 255 255 / 0.03), 6px 8px 18px rgb(0 0 0 / 0.55),
    2px 3px 4px rgb(0 0 0 / 0.3);
  --shadow-raised-hover:
    -5px -5px 14px rgb(255 255 255 / 0.04), 9px 13px 26px rgb(0 0 0 / 0.6),
    2px 3px 5px rgb(0 0 0 / 0.3);
  --shadow-raised-sm:
    -2px -2px 6px rgb(255 255 255 / 0.03), 3px 4px 10px rgb(0 0 0 / 0.5),
    1px 1px 2px rgb(0 0 0 / 0.3);
  --shadow-pressed: inset 3px 3px 7px rgb(0 0 0 / 0.5), inset -2px -2px 5px rgb(255 255 255 / 0.03);

  /* sunken wells: badges, score chips (--shadow-well) and inputs */
  --shadow-well: inset 0 1px 2px rgb(0 0 0 / 0.4), 0 1px 0 rgb(255 255 255 / 0.04);
  --shadow-well-input: inset 0 1px 2px rgb(0 0 0 / 0.3), 0 1px 0 rgb(255 255 255 / 0.03);

  /* soft top-down highlight laid over a surface's fill */
  --sheen: linear-gradient(180deg, rgb(255 255 255 / 0.035) 0%, transparent 60%);

  /* --- glow + depth --------------------------------------------------- */
  --inset-hi: inset 0 1px 0 rgb(255 255 255 / 0.08);
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.25), 0 12px 28px -18px rgb(0 0 0 / 0.7);
  --glow-accent: 0 8px 24px -10px color-mix(in srgb, var(--accent-hi) 55%, transparent);
  --glow-gold: 0 8px 24px -12px color-mix(in srgb, var(--gold) 50%, transparent);

  /* --- cards ---------------------------------------------------------- */
  --pad-card: clamp(1rem, 0.85rem + 0.5vw, 1.25rem);
  --radius-card: 14px;

  /* --- duotone icons: opacity of the tinted fill layer (.icon .duo) --- */
  --icon-duo: 0.22;
}

/* --- light theme ------------------------------------------------------------
   Same structure, flipped: white cards on a cool off-white page, dark ink,
   and deeper greens/golds so accents keep ≥4.5:1 as text. Highlights stay
   white; shadows drop to soft, cool, low-alpha greys. */
:root[data-theme='light'] {
  color-scheme: light;

  --bg-page: #f2f2f5;
  --bg-sunken: #e6e6ec;
  --bg-card: #fcfcfd;
  --bg-elevated: #efeff3;
  --bg-input: #f7f7f9;

  --line: #dedee5;
  --line-strong: #c9c9d2;

  --text-heading: #1d1d24;
  --text-primary: #18181e;
  --text-body: #3b3b45;
  --text-secondary: #585864;
  --text-muted: #6e6e7a;

  --accent-hi: #23764f; /* links + values on white */
  --accent-lo: #1c5e3f;
  --accent-bright: #3a9b6c;
  --accent-wash: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-ink: #ffffff; /* green fills are darker here, so ink flips */

  --gold: #946000;
  --gold-wash: color-mix(in srgb, #ffc233 22%, transparent);
  --pos: #137a4f;
  --pos-wash: color-mix(in srgb, var(--pos) 12%, transparent);
  --neg: #cc2e2e;
  --info: #1a6fd1;
  --silver: #7a8391;
  --bronze: #a95c30;

  --rim-rgb: 0 0 0;
  --shade: rgb(0 0 0 / 0.14);

  --shadow-sm: 0 1px 2px rgb(20 20 40 / 0.08);
  --shadow-lg: 0 16px 40px -12px rgb(20 20 40 / 0.18);

  --grad-gold: linear-gradient(135deg, #ffe29a 0%, #ffd166 50%, #e8a93a 100%);
  --grad-text: linear-gradient(180deg, #2a2a33 0%, var(--text-heading) 45%, #55555f 100%);
  --grad-text-accent: linear-gradient(135deg, #1d1d24 10%, var(--accent-hi) 100%);

  --edge: linear-gradient(
    145deg,
    rgb(0 0 0 / 0.06) 0%,
    rgb(0 0 0 / 0.08) 45%,
    rgb(0 0 0 / 0.13) 100%
  );
  --edge-hover: linear-gradient(
    145deg,
    rgb(0 0 0 / 0.1) 0%,
    rgb(0 0 0 / 0.12) 45%,
    rgb(0 0 0 / 0.18) 100%
  );

  /* tappable cards: half the read-only edge — on white the raised shadow
     already outlines them */
  --edge-clickable: linear-gradient(
    145deg,
    rgb(0 0 0 / 0.03) 0%,
    rgb(0 0 0 / 0.04) 45%,
    rgb(0 0 0 / 0.07) 100%
  );
  --edge-clickable-hover: linear-gradient(
    color-mix(in srgb, var(--line) 70%, var(--bg-card)),
    color-mix(in srgb, var(--line) 70%, var(--bg-card))
  );

  --edge-dent: linear-gradient(
    145deg,
    rgb(0 0 0 / 0.12) 0%,
    rgb(0 0 0 / 0.04) 55%,
    rgb(255 255 255 / 0.9) 100%
  );
  --shadow-dent: inset 2px 2px 5px rgb(20 20 40 / 0.08), inset -1px -1px 3px rgb(255 255 255 / 0.8);

  --sheen-convex: linear-gradient(
    145deg,
    rgb(255 255 255 / 0.7) 0%,
    rgb(255 255 255 / 0.2) 40%,
    rgb(0 0 0 / 0.03) 100%
  );
  --shadow-raised:
    -4px -4px 10px rgb(255 255 255 / 0.9), 6px 8px 18px rgb(20 20 40 / 0.12),
    2px 3px 4px rgb(20 20 40 / 0.07);
  --shadow-raised-hover:
    -5px -5px 14px rgb(255 255 255 / 1), 9px 13px 26px rgb(20 20 40 / 0.14),
    2px 3px 5px rgb(20 20 40 / 0.07);
  --shadow-raised-sm:
    -2px -2px 6px rgb(255 255 255 / 0.9), 3px 4px 10px rgb(20 20 40 / 0.1),
    1px 1px 2px rgb(20 20 40 / 0.07);
  --shadow-pressed:
    inset 3px 3px 7px rgb(20 20 40 / 0.12), inset -2px -2px 5px rgb(255 255 255 / 0.8);

  --shadow-well: inset 0 1px 2px rgb(20 20 40 / 0.1), 0 1px 0 rgb(255 255 255 / 0.9);
  --shadow-well-input: inset 0 1px 2px rgb(20 20 40 / 0.08), 0 1px 0 rgb(255 255 255 / 0.9);

  --sheen: linear-gradient(180deg, rgb(255 255 255 / 0.6) 0%, transparent 60%);
  --inset-hi: inset 0 1px 0 rgb(255 255 255 / 0.25);
  --shadow-card: 0 1px 2px rgb(20 20 40 / 0.05), 0 12px 28px -18px rgb(20 20 40 / 0.2);
  --glow-accent: 0 8px 24px -12px color-mix(in srgb, var(--accent-hi) 45%, transparent);
  --glow-gold: 0 8px 24px -12px color-mix(in srgb, #ffc233 50%, transparent);

  --icon-duo: 0.16;
}

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