/* ==========================================================================
   PLAY CORE — design tokens. Brand supplied by sport lab: navy, orange, cyan.
   Three named roles (colour strategy: FULL PALETTE, as the mockups use it):
     orange = ACT     the one forward button and the selected card
     azure  = INFORM  labels, the primary-skill tint, archive navigation
     navy   = READ    every word; neutrals are navy diluted (the mockups' ground)
   Cyan lives in the logo only. Form archetype: SOFT (the client drew it).
   ========================================================================== */
:root {
  color-scheme: light;

  /* ---- Ground and neutrals: navy diluted. The PAGE is tinted, CARDS are white. ---- */
  --bg:            oklch(0.966 0.011 250);   /* page ground, the mockups' blue-grey */
  --card:          oklch(0.995 0.002 250);   /* card face */
  --surface:       oklch(0.950 0.013 250);
  --surface-2:     oklch(0.930 0.015 250);
  --surface-3:     oklch(0.900 0.018 250);
  --ink:           oklch(0.245 0.060 262);   /* navy */
  --ink-2:         oklch(0.340 0.050 262);
  --muted:         oklch(0.480 0.035 262);   /* >=4.5:1 on --bg */
  --muted-2:       oklch(0.600 0.028 262);
  --line:          oklch(0.895 0.014 250);
  --line-strong:   oklch(0.820 0.020 250);

  /* ---- ACT: orange ---- */
  --primary:       oklch(0.700 0.190 48);    /* the brand orange; navy text on it */
  --primary-strong:oklch(0.660 0.190 46);   /* hover; still >=4.5:1 with navy */
  --primary-ink:   oklch(0.540 0.170 46);    /* orange as TEXT: >=4.5:1 on white */
  --primary-soft:  oklch(0.965 0.030 60);    /* peach tint for the selected card */
  --primary-soft-2:oklch(0.920 0.065 58);
  --on-primary:    oklch(0.245 0.060 262);   /* navy on orange: readable in hall light */

  /* ---- INFORM: azure ---- */
  --accent:        oklch(0.545 0.190 258);
  --accent-strong: oklch(0.470 0.180 258);
  --accent-ink:    oklch(0.500 0.185 258);
  --accent-soft:   oklch(0.950 0.025 255);   /* blue tint for information cards */
  --accent-soft-2: oklch(0.900 0.050 255);
  --on-accent:     oklch(0.995 0 0);

  /* ---- The logo's cyan. Never for UI. ---- */
  --cyan:          oklch(0.720 0.130 222);

  /* ---- One dark band: navy ---- */
  --drench:        oklch(0.220 0.060 262);
  --drench-2:      oklch(0.280 0.060 262);
  --on-drench:     oklch(0.975 0.006 250);
  --on-drench-muted: oklch(0.760 0.030 255);
  --drench-line:   oklch(0.360 0.050 262);

  /* ---- Semantic: STATES ONLY. Danger is a red-orange kept well away from hue 48. ---- */
  --success: oklch(0.585 0.125 155); --success-soft: oklch(0.950 0.038 155); --success-ink: oklch(0.395 0.098 155);
  --warning: oklch(0.760 0.145 85);  --warning-soft: oklch(0.960 0.050 85);  --warning-ink: oklch(0.440 0.105 75);
  --danger:  oklch(0.560 0.200 25);  --danger-soft:  oklch(0.950 0.036 25);  --danger-ink:  oklch(0.450 0.170 25);
  --info:    oklch(0.545 0.190 258); --info-soft:    oklch(0.950 0.025 255); --info-ink:    oklch(0.500 0.185 258);

  /* NODE REPLAY ratings, in order: ++ + 0 – ? */
  --rate-pp: var(--success-ink); --rate-p: oklch(0.520 0.110 150); --rate-0: var(--muted);
  --rate-m: var(--danger-ink);   --rate-q: var(--accent-ink);

  /* Categorical: six domains SEE MOVE CONNECT DECIDE ADAPT PLAY — one ramp, azure→navy */
  --c-1: oklch(0.86 0.06 255); --c-2: oklch(0.74 0.11 255);
  --c-3: oklch(0.60 0.16 258); --c-4: oklch(0.48 0.16 260); --c-5: oklch(0.36 0.10 262); --c-6: oklch(0.26 0.07 262);

  /* ---- Type: one family, two registers ---- */
  --font-display: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-display: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);
  --fs-h1:      clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  --fs-h2:      clamp(1.625rem, 1.25rem + 1.4vw, 2.375rem);
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --fs-lead:    clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);

  --t-32: 2rem;      --t-28: 1.75rem;   --t-24: 1.5rem;    --t-22: 1.375rem;
  --t-20: 1.25rem;   --t-18: 1.125rem;  --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: 1.08; --lh-snug: 1.22; --lh-body: 1.55; --lh-relaxed: 1.7;
  --tracking-display: -0.025em; --tracking-heading: -0.015em; --tracking-ui: 0; --tracking-caps: 0.09em;

  --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.75rem + 3vw, 4.5rem);
  --gutter:        clamp(1.125rem, 3.5vw, 2.25rem);
  --container: 1180px; --container-wide: 1420px; --container-narrow: 720px; --measure: 62ch;

  /* ==========================================================================
     FORM LAYER — SOFT. The mockups: rounded white cards on a tinted page, one
     hairline, selection by a 2px orange border and a peach tint, no shadow at
     rest, big targets. Refined to ONE card radius and ONE badge.
     ========================================================================== */
  /* 1. Shape */
  --r-ctl: 12px; --r-card: 16px; --r-lg: 24px; --r-full: 999px;

  /* 2. Border weight: hairline at rest, 2px when selected */
  --bw: 1px; --bw-ctl: 1px; --bw-strong: 2px;
  --rule:        var(--bw) solid var(--line);
  --rule-ctl:    var(--bw-ctl) solid var(--line-strong);
  --rule-strong: var(--bw-strong) solid var(--primary);   /* the selected card */

  /* 3. Elevation: none at rest; only sheets and popovers float */
  --elev-card:  none;
  --elev-pop:   0 8px 24px -8px oklch(0.245 0.060 262 / 0.20), 0 1px 2px oklch(0.245 0.060 262 / 0.06);
  --elev-modal: 0 24px 56px -12px oklch(0.245 0.060 262 / 0.32);
  --e-1: 0 1px 2px oklch(0.245 0.060 262 / 0.06); --e-2: var(--elev-pop); --e-3: var(--elev-modal);

  /* 4. Density: a thumb in a sports hall */
  --h-ctl: 56px; --h-ctl-sm: 40px; --h-row: 64px;
  --pad-card: 18px; --gap-grid: var(--s-3); --app-gutter: 20px;
  --badge: 32px;

  /* 5. Dividers: none inside cards; cards themselves divide */
  --cell-rule: none; --row-rule: none;

  /* 6. Heading treatment: heavy, tight, Title Case; capitals only on 11–12px labels */
  --wt-head: 800; --wt-body: 500; --case-head: none;

  --dur-1: 120ms; --dur-2: 190ms; --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; }
}