/* ============================================================================
   RIVERTOWN — THE TOKEN SYSTEM
   ---------------------------------------------------------------------------
   Locked before a single element was composed. Nothing on this site carries a
   value that is not defined here. If a rule cannot be named, the element is in
   the wrong place.

   THE AUTHORED AXIS, and it is a rule about MEANING, not taste:
     · A section that carries ACTION or DATA -- the sign, the board, hours,
       forms, the roster, anything you scan and act on -- anchors LEFT on
       desktop. You read a signpost from its edge.
     · A section that carries VOICE -- the promise, the philosophy, the
       invitation, the mission -- CENTERS on desktop. You receive care facing it.
     · On a phone everything centers, with ONE named exception: running body
       text stays left, because centered paragraphs are hard to read and this
       site is read by people who are tired, medicated, or frightened.
   That rule is held everywhere. It is why nothing here floats.

   COLOUR is theirs, pipetted from their real mark, never approximated:
     #003399 navy   -- 27.5% of the logo's pixels
     #FF3399 lit    -- the two separator dots
   The magenta is a STATE, not a decoration. It marks what is true this second:
   an open door, a running clock, the one action that works at this hour. Its
   surface never exceeds 10%. The whole psychiatry category is sage and teal;
   this is theirs and nobody else's.
   ========================================================================= */

:root {
  /* ── L1 primitives ─────────────────────────────────────────── */
  --navy-900:#01061a; --navy-850:#020b24; --navy-800:#04113a; --navy-700:#062057;
  --navy-600:#002d85; --navy-500:#003399; --navy-400:#1a4fb5; --navy-300:#4d7ad1;
  --navy-200:#8faae4; --navy-100:#c4d3f3; --navy-050:#e8eefb;
  --lit-600:#c9106e; --lit-500:#ff3399; --lit-400:#ff66b3; --lit-200:#ffb3d9;
  --warn-500:#ffb43d;

  /* ── L2 semantic (90% of the build points here) ────────────── */
  --ground:var(--navy-900);
  --surface:var(--navy-850);
  --surface-raised:var(--navy-800);
  --ink:#eaf0ff;
  --ink-soft:#b7c6e8;
  --ink-muted:#8195c2;          /* 4.6:1 on --ground, checked */
  --accent:var(--lit-500);
  --accent-ink:#2b0014;
  --accent-quiet:var(--lit-200);
  --line:color-mix(in srgb, var(--navy-200) 17%, transparent);
  --line-strong:color-mix(in srgb, var(--navy-200) 30%, transparent);
  --focus:var(--lit-400);
  --danger:#ff6b6b;

  /* ── Space: one 4-based ramp. Nothing between these, ever. ─── */
  --space-1:4px;   --space-2:8px;   --space-3:12px;  --space-4:16px;
  --space-5:24px;  --space-6:32px;  --space-7:48px;  --space-8:64px;
  --space-9:96px;  --space-10:128px; --space-11:160px; --space-12:224px;
  --section-y:clamp(3.5rem, 2.5rem + 4.5vw, 8rem);

  /* ── Grid ──────────────────────────────────────────────────── */
  --edge:clamp(1rem, 0.6rem + 1.1vw, 1.5rem);
  --gutter:clamp(1.25rem, 0.8rem + 2vw, 3rem);
  --shell:min(100% - 2*var(--edge), 78rem);
  --measure:65ch;

  /* ── Type: two families, one job each. ─────────────────────────
     LEXEND is the whole voice -- Mega for display, the regular width
     for reading. It is one superfamily, and it was drawn on
     reading-proficiency research to reduce reading effort. On a site
     read by people in distress, by kids with ADHD, and across a wide
     literacy range, that is a clinical argument, not a style.
     MARTIAN MONO carries every live number: the countdown, the hours,
     the ledger. Data holds still and reads as data.        */
  --display:'Lexend Mega','Lexend',system-ui,sans-serif;
  --text:'Lexend',system-ui,sans-serif;
  --mono:'Martian Mono',ui-monospace,monospace;

  /* 1.25 ratio, generated. Reference the token, never type a rem. */
  --ms-dn2:0.64rem; --ms-dn1:0.8rem; --ms-0:1rem;   --ms-1:1.25rem;
  --ms-2:1.563rem;  --ms-3:1.953rem; --ms-4:2.441rem; --ms-5:3.052rem;
  --ms-6:3.815rem;  --ms-7:4.768rem;

  /* ── Radius: sharp house lane. This is signage, not a spa. ─── */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-pill:999px; --r-full:50%;

  /* ── Elevation: one light source, straight down, ink-tinted ── */
  --e1:0 1px 2px rgb(1 6 26 / .40), 0 1px 1px rgb(1 6 26 / .28);
  --e2:0 1px 2px rgb(1 6 26 / .40), 0 4px 8px rgb(1 6 26 / .34);
  --e3:0 1px 2px rgb(1 6 26 / .46), 0 12px 20px rgb(1 6 26 / .40);
  --e4:0 1px 2px rgb(1 6 26 / .50), 0 24px 40px rgb(1 6 26 / .40);
  /* On a dark field, LIGHT is the elevation. This is the lit rung. */
  --glow-sm:0 0 16px color-mix(in srgb, var(--accent) 55%, transparent);
  --glow-md:0 0 28px color-mix(in srgb, var(--accent) 50%, transparent),
            0 0 64px color-mix(in srgb, var(--accent) 26%, transparent);

  /* ── Motion: two eases, four durations, one reveal verb ────── */
  --ease-standard:cubic-bezier(0.22,0.61,0.36,1);
  --ease-expressive:cubic-bezier(0.16,1,0.30,1);
  --dur-micro:120ms; --dur-element:200ms; --dur-section:320ms; --dur-cinematic:600ms;
  --stagger:75ms;

  font-size:clamp(1rem, 0.93rem + 0.31vw, 1.1875rem);
}

/* The OKLCH override: same colours, better interpolation where supported.
   Neutrals keep the brand hue locked; only lightness moves. */
@supports (color: oklch(0 0 0)) {
  :root {
    --navy-900:oklch(16% 0.055 264); --navy-850:oklch(19% 0.070 264);
    --navy-800:oklch(24% 0.095 264); --navy-700:oklch(31% 0.125 264);
    --navy-600:oklch(38% 0.160 264); --navy-500:oklch(42% 0.185 264);
    --navy-400:oklch(50% 0.165 264); --navy-300:oklch(61% 0.130 264);
    --navy-200:oklch(74% 0.085 264); --navy-100:oklch(86% 0.045 264);
    --ink:oklch(95% 0.018 264); --ink-soft:oklch(82% 0.038 264);
    --ink-muted:oklch(68% 0.050 264);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-micro:1ms; --dur-element:1ms; --dur-section:1ms; --dur-cinematic:1ms; --stagger:0ms; }
}