/* ==========================================================================
   DLN Medical — design tokens  (v1, 2026-10-07)
   Light theme only. Every colour, size and timing used by base.css and the
   illustrations comes from here. Change a value here, not in components.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Brand (sampled from the logo PNG) — graphics, fills, large shapes.
     NOT for body text: green is 2.0:1 and teal 3.0:1 on white. ----------- */
  --brand-green: #8ec641;
  --brand-teal:  #12a89f;

  /* ---- Text-safe derivatives of the brand colours ---------------------- */
  --teal-700: #0b6f69;   /* links, primary button bg. 6.0:1 on white, 5.5:1 on linen */
  --teal-800: #0a5a55;   /* hover/pressed */
  --green-700: #46701b;  /* green text, success. 5.8:1 on white, 5.0:1 on sand */
  --green-800: #3a5d16;

  /* ---- Washes (tinted surfaces, never text) ----------------------------- */
  --teal-50:  #e8f4f2;
  --teal-100: #cfe9e5;
  --green-50: #f1f6e7;
  --green-100: #dfedc9;

  /* ---- Warm neutrals ----------------------------------------------------- */
  --paper:  #ffffff;     /* cards, inputs, header */
  --linen:  #f8f5ef;     /* page base */
  --sand:   #f1ece3;     /* alternate sections, arch frames */
  --stone:  #e2dbcf;     /* hairlines, borders (decorative, 3:1 not required) */
  --stone-strong: #8f8a80; /* input borders: 3.3:1 on white (non-text UI min 3:1) */

  /* ---- Ink ---------------------------------------------------------------- */
  --ink:       #1c2321;  /* headings, body. 16:1 on white */
  --ink-soft:  #4a524e;  /* secondary text. 7.4:1 on linen */
  --ink-muted: #5c635f;  /* captions, meta. 5.2:1 on sand (lowest allowed) */
  --on-dark:   #ffffff;  /* text on teal-700 / ink */

  /* ---- Feedback ---------------------------------------------------------- */
  --danger: #9e3a29;      /* 6.2:1 on linen */
  --danger-50: #f8e9e5;
  --success: var(--green-700);

  /* ---- Semantic aliases (components use these) -------------------------- */
  --bg: var(--linen);
  --surface: var(--paper);
  --surface-alt: var(--sand);
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --text-muted: var(--ink-muted);
  --line: var(--stone);
  --accent: var(--teal-700);
  --accent-hover: var(--teal-800);
  --focus: var(--teal-700);

  /* ---- Type families -------------------------------------------------------
     Display: Newsreader (humanist text-serif with optical sizes, Production Type)
     Text:    Instrument Sans (refined grotesque, Rodrigo Fuenzalida)
     Both ship the full Latin-1 range (ë Ë ç Ç) in the Google "latin" subset. */
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-text: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---- Fluid type scale (360px -> 1600px). Ratio ~1.2 small, ~1.33 large -- */
  --t-xs:   clamp(0.75rem, 0.73rem + 0.08vw, 0.8125rem);
  --t-sm:   clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --t-base: clamp(1rem, 0.96rem + 0.16vw, 1.125rem);
  --t-lg:   clamp(1.125rem, 1.06rem + 0.28vw, 1.3125rem);
  --t-xl:   clamp(1.3rem, 1.17rem + 0.56vw, 1.75rem);
  --t-2xl:  clamp(1.55rem, 1.3rem + 1.1vw, 2.375rem);
  --t-3xl:  clamp(1.9rem, 1.45rem + 2vw, 3.25rem);
  --t-4xl:  clamp(2.25rem, 1.6rem + 2.9vw, 4.25rem);
  --t-5xl:  clamp(2.6rem, 1.7rem + 4vw, 5.5rem);

  --lh-tight: 1.06;
  --lh-snug: 1.22;
  --lh-body: 1.6;
  --track-caps: 0.12em;   /* eyebrows, small caps labels */
  --measure: 66ch;        /* max line length for prose */

  /* ---- Spacing (4px base) ------------------------------------------------- */
  --s-1: 0.25rem;  /*  4 */
  --s-2: 0.5rem;   /*  8 */
  --s-3: 0.75rem;  /* 12 */
  --s-4: 1rem;     /* 16 */
  --s-5: 1.5rem;   /* 24 */
  --s-6: 2rem;     /* 32 */
  --s-7: 3rem;     /* 48 */
  --s-8: 4rem;     /* 64 */
  --s-9: 6rem;     /* 96 */
  --s-10: 8rem;    /* 128 */
  --section-y: clamp(4rem, 2.6rem + 6vw, 9rem);   /* vertical rhythm between sections */
  --gutter: clamp(1rem, 0.6rem + 1.8vw, 2.5rem);  /* page side padding: 16px at 360 */
  --container: 76rem;       /* 1216px content */
  --container-wide: 92rem;  /* 1472px for full-bleed-ish layouts */

  /* ---- Radii: small and editorial; the arch is the signature shape ------- */
  --r-1: 3px;     /* inputs, buttons */
  --r-2: 6px;     /* badges, small cards */
  --r-3: 12px;    /* cards, panels */
  --r-arch: 999px 999px var(--r-3) var(--r-3);  /* arch frame: echoes the round mark */
  --r-round: 999px;

  /* ---- Shadows: warm-tinted, low, mostly for lift on hover --------------- */
  --sh-0: 0 0 0 1px var(--line);
  --sh-1: 0 1px 2px rgb(60 45 25 / 0.06), 0 0 0 1px rgb(60 45 25 / 0.04);
  --sh-2: 0 2px 4px rgb(60 45 25 / 0.04), 0 14px 28px -12px rgb(60 45 25 / 0.16);
  --sh-3: 0 4px 8px rgb(60 45 25 / 0.05), 0 28px 56px -20px rgb(60 45 25 / 0.24);

  /* ---- Motion --------------------------------------------------------------
     Calm, never bouncy. Things settle; they do not spring. */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);     /* default for entrances */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);     /* draws, longer moves */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);         /* hovers */
  --ease-breath: cubic-bezier(0.37, 0, 0.63, 1);     /* sine-like loops */
  --d-1: 140ms;   /* hover colour */
  --d-2: 240ms;   /* small moves, focus */
  --d-3: 480ms;   /* drawer, menus */
  --d-4: 900ms;   /* reveal on scroll */
  --d-5: 1600ms;  /* stroke draw */
  --d-loop: 7s;   /* breathing loops */
  --reveal-shift: 18px;
  --stagger: 90ms;

  /* ---- Layers ------------------------------------------------------------- */
  --z-header: 50;
  --z-drawer: 60;
  --z-skip: 100;
}

/* Reduced motion: loops, draws and reveals collapse to their end state. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-1: 1ms; --d-2: 1ms; --d-3: 1ms; --d-4: 1ms; --d-5: 1ms;
    --reveal-shift: 0px;
    --stagger: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}