/* tokens.css — design tokens. Single source of truth. Do not redefine components here. */
:root {
  /* Brand: clinical teal + ink navy. Two brand colors + neutrals only. */
  --brand: #0d9488;
  --brand-600: #0f766e;
  --brand-700: #115e59;
  --brand-050: #f0fdfa;
  --brand-100: #ccfbf1;
  --ink: #0f172a;
  --accent: #f59e0b; /* CTA emphasis, used sparingly */

  /* Neutrals (slate) */
  --n-0:  #ffffff;
  --n-25: #fbfcfd;
  --n-50: #f8fafc;
  --n-100:#f1f5f9;
  --n-200:#e2e8f0;
  --n-300:#cbd5e1;
  --n-400:#94a3b8;
  --n-500:#64748b;
  --n-600:#475569;
  --n-700:#334155;
  --n-800:#1e293b;
  --n-900:#0f172a;

  /* Semantic surfaces / text */
  --bg: var(--n-25);
  --bg-alt: var(--n-50);
  --surface: var(--n-0);
  --surface-2: var(--n-100);
  --border: var(--n-200);
  --border-strong: var(--n-300);
  --text: var(--n-900);
  --text-2: var(--n-600);
  --text-3: var(--n-500);
  --on-brand: #ffffff;
  --link: var(--brand-700);

  /* Fluid type scale (clamp: min .. max between 360 and 1280 viewport) */
  --step--1: clamp(0.833rem, 0.80rem + 0.15vw, 0.94rem);
  --step-0:  clamp(1.0625rem, 1.01rem + 0.24vw, 1.1875rem);   /* body 17-19px */
  --step-1:  clamp(1.27rem, 1.18rem + 0.42vw, 1.55rem);
  --step-2:  clamp(1.52rem, 1.36rem + 0.72vw, 2.04rem);
  --step-3:  clamp(1.82rem, 1.57rem + 1.18vw, 2.67rem);
  --step-4:  clamp(2.19rem, 1.79rem + 1.85vw, 3.5rem);
  --step-5:  clamp(2.62rem, 2.02rem + 2.8vw, 4.6rem);

  /* Spacing scale (multiples of 4) */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;
  --section-y: clamp(80px, 10vw, 160px);
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 68ch;

  /* Radii */
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px;

  /* Shadows */
  --sh-1: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
  --sh-2: 0 4px 12px rgba(15,23,42,.07), 0 2px 4px rgba(15,23,42,.05);
  --sh-3: 0 12px 32px rgba(15,23,42,.10), 0 4px 8px rgba(15,23,42,.06);
  --sh-brand: 0 10px 30px rgba(13,148,136,.22);

  /* Motion */
  --dur-1: 200ms; --dur-2: 320ms; --dur-3: 480ms; --dur-4: 700ms; --dur-5: 900ms;
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-out: cubic-bezier(.4,0,1,1);

  /* Layout */
  --container: 1200px;
  --container-wide: 1360px;
  --header-h: 76px;

  /* Fonts */
  --font-display: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0f1a;
    --bg-alt: #0c1424;
    --surface: #0f1930;
    --surface-2: #142138;
    --border: #1f2d47;
    --border-strong: #2a3b5c;
    --text: #e8eef7;
    --text-2: #a9b6cc;
    --text-3: #8496b3;
    --brand: #2dd4bf;
    --brand-600: #14b8a6;
    --brand-700: #5eead4;
    --link: #5eead4;
    --on-brand: #04201d;
    --sh-1: 0 1px 2px rgba(0,0,0,.4);
    --sh-2: 0 4px 14px rgba(0,0,0,.45);
    --sh-3: 0 14px 36px rgba(0,0,0,.5);
    --sh-brand: 0 10px 30px rgba(45,212,191,.18);
  }
}