/* ==========================================================================
   Victorian Concussion Network — Design Tokens 2026 (v2.0)
   Modernised from v1. Keeps the blue brand equity but elevates it with a warm
   neutral base, a full tonal scale, fluid type, dark-mode, and motion tokens.
   Direction grounded in 2026 award-site practice (editorial + Bento 2.0) and
   modern health brands (Parsley Health, One Medical).
   ========================================================================== */

:root {
  /* ---- Brand blue — full tonal scale (continuity with v1 in 300/500/700) ---- */
  --azure-50:  #EAF6FC;
  --azure-100: #CFEBF8;
  --azure-200: #A6DBF1;
  --azure-300: #6AC5EB;  /* v1 "Sky" */
  --azure-400: #38B0E2;
  --azure-500: #20A8E0;  /* v1 "Vivid Cyan" — logo wordmark */
  --azure-600: #1486C4;
  --azure-700: #0870B8;  /* v1 "Deep" — AA on white */
  --azure-800: #0A4F80;
  --azure-900: #0B2A40;  /* deep brand navy */

  /* ---- Tide: deep brand surface for dark sections / footers ---- */
  --tide-900: #08243A;
  --tide-950: #061826;

  /* ---- Warm neutrals — the 2026 move away from sterile grey/white ---- */
  --bone:   #F6F2EC;   /* page background (warm off-white)   */
  --paper:  #FFFFFF;   /* cards / raised surfaces            */
  --shell:  #FBF8F3;   /* alt surface / inset                */
  --sand:   #ECE4D7;   /* warm fill, dividers on bone        */
  --line:   #E5DDD0;   /* hairlines on warm bg               */

  /* ---- Ink — deep navy instead of pure black (calmer, premium) ---- */
  --ink:        #0E2233;  /* primary text            */
  --ink-soft:   #44586A;  /* secondary text          */
  --ink-mute:   #7C8C99;  /* captions, metadata      */

  /* ---- Warm signal accent — EDITORIAL ONLY, ≤5% of any screen ---- */
  --clay:       #DC8A5C;  /* warm highlight, underlines, small marks */
  --clay-soft:  #F3D9C5;

  /* ---- Status ---- */
  --ok:    #2E9E6B;
  --error: #DA4A4A;

  /* ---- Signature gradient (logo orbit, refined) ---- */
  --grad-azure: linear-gradient(135deg, #38B0E2 0%, #0870B8 60%, #0B2A40 100%);
  --grad-warm:  linear-gradient(135deg, #F6F2EC 0%, #ECE4D7 100%);

  /* ---- Type families ---- */
  --font-display: "Outfit", "Helvetica Neue", Arial, sans-serif; /* headings — matches live clinic sites */
  --font-text:    "Hanken Grotesk", system-ui, sans-serif;/* body / UI                     */
  --font-mono:    "Geist Mono", ui-monospace, monospace;  /* labels, section numerals      */

  /* ---- Fluid type scale (clamp: min, preferred, max) ---- */
  --t-display: clamp(2.75rem, 1.4rem + 6vw, 5.5rem);   /* hero            */
  --t-h1:      clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  --t-h2:      clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  --t-h3:      clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
  --t-lead:    clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --t-body:    1.0625rem;   /* 17px */
  --t-small:   0.875rem;    /* 14px */
  --t-eyebrow: 0.75rem;     /* 12px, uppercase, tracked */

  --leading-tight: 1.04;
  --leading-snug:  1.15;
  --leading-body:  1.6;
  --tracking-tight: -0.02em;
  --tracking-eyebrow: 0.18em;

  /* ---- Radius ---- */
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  24px;   /* bento tiles */
  --r-xl:  32px;
  --r-pill: 999px;

  /* ---- Spacing (8px base) ---- */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px;
  --section-y: clamp(64px, 9vw, 144px);   /* vertical section rhythm */
  --gutter:    clamp(20px, 5vw, 80px);     /* page side margins       */
  --maxw: 1280px;

  /* ---- Elevation — soft, blue-tinted ---- */
  --e-1: 0 1px 2px rgba(14,34,51,.05);
  --e-2: 0 10px 30px rgba(11,42,64,.08);
  --e-3: 0 24px 60px rgba(11,42,64,.12);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 180ms;
  --dur:      320ms;
  --dur-slow: 600ms;

  /* ---- Semantic tokens (light only) ----
     Note: the deep --tide-900 navy is still used as a *fixed design element*
     — the sidebar chrome and the trust band — but the page itself is
     light-mode only (no dark theme / no theme toggle). */
  --bg:      var(--bone);
  --surface: var(--paper);
  --text:    var(--ink);
  --text-2:  var(--ink-soft);
  --text-3:  var(--ink-mute);
  --border:  var(--line);
  --accent:  var(--azure-700);   /* AA-safe interactive blue */
  --accent-bright: var(--azure-500);

  /* ---- Sidebar (house-format chrome) ---- */
  --sidebar-bg:     var(--tide-900);
  --sidebar-text:   rgba(255,255,255,.72);
  --sidebar-mute:   rgba(255,255,255,.40);
  --sidebar-active: var(--azure-300);
  --sidebar-w:      280px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}