/* ==========================================================================
   PhotoX design tokens — MATCHDAY. Hue 158 (forest green) with gold (hue 88).
   Form: card deck on a light ground, one soft shadow step, chunky rounded
   controls, condensed uppercase headlines. See docs/DESIGN.md.
   ========================================================================== */
:root {
  color-scheme: light;

  /* ---- Neutrals, tinted toward green, never pure grey ---- */
  --bg:            oklch(0.97 0.006 158);   /* app ground */
  --surface:       oklch(1 0 0);            /* card */
  --surface-2:     oklch(0.955 0.010 158);
  --surface-3:     oklch(0.925 0.016 158);
  --ink:           oklch(0.19 0.015 158);   /* 14.6:1 on --bg */
  --ink-2:         oklch(0.32 0.020 158);
  --muted:         oklch(0.46 0.022 158);   /* 6.5:1 on --bg */
  --muted-2:       oklch(0.56 0.020 158);   /* 4.5:1 on --bg */
  --line:          oklch(0.90 0.012 158);
  --line-strong:   oklch(0.82 0.020 158);

  /* ---- Brand: committed green, gold for the primary action ---- */
  --primary:       oklch(0.42 0.105 158);
  --primary-strong:oklch(0.35 0.095 158);
  --primary-soft:  oklch(0.945 0.030 158);
  --primary-soft-2:oklch(0.89 0.060 158);
  --on-primary:    oklch(0.99 0.004 158);

  --accent:        oklch(0.84 0.165 88);
  --accent-strong: oklch(0.78 0.170 84);
  --accent-soft:   oklch(0.96 0.060 90);
  --on-accent:     oklch(0.19 0.015 158);

  /* Drench: the green itself is the dark band. */
  --drench:        oklch(0.36 0.095 158);
  --drench-2:      oklch(0.42 0.105 158);
  --on-drench:     oklch(0.99 0.004 158);
  --on-drench-muted: oklch(0.86 0.045 158);
  --drench-line:   oklch(0.50 0.090 158);

  /* ---- Semantic: states only ---- */
  --success: oklch(0.58 0.14 150); --success-soft: oklch(0.94 0.055 150); --success-ink: oklch(0.38 0.11 150);
  --warning: oklch(0.76 0.15 75);  --warning-soft: oklch(0.95 0.06 80);  --warning-ink: oklch(0.44 0.11 68);
  --danger:  oklch(0.55 0.19 28);  --danger-soft:  oklch(0.94 0.045 28); --danger-ink:  oklch(0.43 0.16 28);
  --info:    oklch(0.52 0.13 255); --info-soft:    oklch(0.94 0.035 255); --info-ink:    oklch(0.40 0.12 255);

  /* Charts: green ramp, gold for the highlight */
  --c-1: oklch(0.88 0.050 158); --c-2: oklch(0.74 0.085 158);
  --c-3: oklch(0.58 0.105 158); --c-4: oklch(0.42 0.105 158); --c-5: oklch(0.84 0.165 88);

  /* ---- Typography ---- */
  --font-display: "Big Shoulders", "Arial Narrow", sans-serif;
  --font-body:    "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Marketing scale — display is condensed, so sizes run large */
  --fs-display: clamp(3.75rem, 1.5rem + 6.5vw, 7.5rem);
  --fs-h1:      clamp(3rem, 1.8rem + 4vw, 5.5rem);
  --fs-h2:      clamp(2.25rem, 1.5rem + 2.4vw, 3.75rem);
  --fs-h3:      clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
  --fs-lead:    clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-xs:      0.8125rem;

  /* Product scale — headings in the condensed face need +25% */
  --t-28: 2.25rem; --t-22: 1.75rem; --t-18: 1.375rem; --t-16: 1rem;
  --t-15: 0.9375rem; --t-14: 0.875rem; --t-13: 0.8125rem; --t-12: 0.75rem; --t-11: 0.6875rem;

  --lh-tight: 0.95; --lh-snug: 1.0; --lh-body: 1.55; --lh-relaxed: 1.7;
  --tracking-display: 0.005em; --tracking-heading: 0.01em; --tracking-ui: 0;

  /* ---- Spacing: 4px base ---- */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;   --s-5: 1.5rem;
  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;    --s-9: 5rem;   --s-10: 6rem; --s-12: 8rem;
  --section:       clamp(4rem, 2.5rem + 5vw, 7.5rem);
  --section-tight: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  --gutter:        clamp(1rem, 4vw, 2.5rem);
  --container: 1240px; --container-wide: 1560px; --container-narrow: 720px; --measure: 64ch;
  --sidebar-w: 240px;

  /* ==========================================================================
     FORM LAYER — Matchday card deck.
     ========================================================================== */
  /* 1. Shape: chunky, rounded. */
  --r-ctl: 12px; --r-card: 18px; --r-lg: 24px; --r-full: 999px;

  /* 2. Border: cards carry no border; controls a hairline. */
  --bw: 1px; --bw-strong: 2px;
  --rule: var(--bw) solid var(--line);
  --rule-strong: var(--bw-strong) solid var(--line);

  /* 3. Elevation: one soft step on every card. */
  --elev-card: 0 1px 2px oklch(0.19 0.015 158 / 0.06), 0 10px 28px -12px oklch(0.19 0.015 158 / 0.22);
  --elev-pop:  0 16px 40px -14px oklch(0.19 0.015 158 / 0.35);
  --elev-modal: 0 30px 70px -24px oklch(0.19 0.015 158 / 0.45);

  /* 4. Density: roomy controls, comfortable rows. */
  --h-ctl: 42px; --h-ctl-sm: 32px; --h-row: 46px;
  --pad-card: var(--s-5); --gap-grid: var(--s-4);

  /* 5. Dividers: hairline between rows inside cards; cards divide by shadow. */
  --cell-rule: none;
  --row-rule: var(--rule);

  /* 6. Headings: condensed, black weight, uppercase. */
  --wt-head: 800; --wt-body: 400;
  --case-head: uppercase;

  --e-1: 0 1px 2px oklch(0.19 0.015 158 / 0.06);
  --e-2: 0 6px 18px -6px oklch(0.19 0.015 158 / 0.16);
  --e-3: 0 20px 50px -16px oklch(0.19 0.015 158 / 0.30);

  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 300ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --pocbar-h: 44px;
  --z-sticky: 20; --z-layer: 60; --z-toast: 80; --z-pocbar: 90; --z-tour: 100;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
}