/* ══════════════════════════════════════════════════════════════════════
   HeartDaily · DESIGN TOKENS — SINGLE SOURCE OF TRUTH
   heartdailyapp.org · v1 (31/07/2026)

   THIS FILE IS THE CANONICAL TOKEN SET FOR THE WHOLE PRODUCT.
   Change a value HERE → every surface that links this file updates at once.

   Surfaces meant to consume this file (via <link rel="stylesheet" href="/assets/tokens.css">):
     • /app/        React PWA      (heartdaily/src/index.css can @import or mirror these)
     • /dashboard/  PHP dashboard  (replace its inline :root)
     • /admin/      PHP admin       (replace its inline :root)
     • /            Landing         (replace inline hex)
     • /styleguide/ Living style guide (reference — renders every token below)

   Values reconciled from CLAUDE.md §12 + §17 and heartdaily/src/index.css
   (the most complete, spec-correct set). Drift found in dashboard/admin/landing
   was normalised TO these values. See /styleguide/ "Drift audit" section.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand ──────────────────────────────────────────────────────── */
  --t:    #0FB8B8;   /* teal — primary action, active state           */
  --td:   #0A9090;   /* teal-dark — teal text on light (AA)           */
  --tl:   #E0F7F7;   /* teal-light — tinted fills, hover bg           */
  --b:    #2563EB;   /* blue — gradient pair, links                   */
  --bl:   #EFF6FF;   /* blue-light — tinted icon chips                */

  /* ── Gradients ──────────────────────────────────────────────────── */
  --grad:   linear-gradient(135deg, #0FB8B8 0%, #2563EB 100%);        /* headers, primary buttons        */
  --grad-h: linear-gradient(135deg, #0A9090 0%, #1D4ED8 100%);        /* hover/pressed                   */
  --grad-s: linear-gradient(135deg, rgba(15,184,184,.10) 0%, rgba(37,99,235,.06) 100%); /* soft tinted card */

  /* ── Clinical risk ──────────────────────────────────────────────── */
  --green:  #10B981;   /* normal BP, success                          */
  --amber:  #F59E0B;   /* elevated / medium risk                      */
  --red:    #EF4444;   /* high BP, critical                           */

  /* Risk badge text/bg pairs (WCAG-safe text on tint) */
  --green-tx: #047857;  --green-bg: rgba(16,185,129,.10);
  --amber-tx: #B45309;  --amber-bg: rgba(245,158,11,.12);
  --red-tx:   #B91C1C;  --red-bg:   rgba(239,68,68,.10);
  --blue-tx:  #1D4ED8;  --blue-bg:  rgba(37,99,235,.09);

  /* ── Neutral scale ──────────────────────────────────────────────── */
  --ink:    #0F172A;   /* headings / primary text                     */
  --body:   #1E293B;   /* body text                                   */
  --sub:    #475569;   /* secondary text  (~7.5:1 on white, AA)        */
  --mute:   #64748B;   /* placeholders / borders / icons ONLY         */
                       /*   ⚠ NEVER use --mute for readable body text  */
  --bord:   #E2E8F0;   /* hairlines, input borders                    */
  --fog:    #F1F5F9;   /* input fills, chip backgrounds               */
  --surf:   #EEF1F5;   /* app canvas (1 step darker → white cards pop) */
  --wh:     #FFFFFF;

  /* ── Type scale — every size × --fs (user font-size preference) ──── */
  --fs: 1;                              /* 1 · 1.12 · 1.25 (a11y toggle) */
  --text-xs:   calc(11px * var(--fs));
  --text-sm:   calc(13px * var(--fs));
  --text-base: calc(15px * var(--fs));
  --text-md:   calc(17px * var(--fs));
  --text-lg:   calc(20px * var(--fs));
  --text-xl:   calc(24px * var(--fs));
  --text-2xl:  calc(32px * var(--fs));
  --text-hero: calc(42px * var(--fs));

  /* ── Spacing ────────────────────────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;

  /* ── Radius ─────────────────────────────────────────────────────── */
  --r:     16px;   /* cards, sheets            */
  --rs:    10px;   /* inputs, buttons, chips   */
  --rpill: 99px;   /* pills, badges, toggles   */

  /* ── Shadows ────────────────────────────────────────────────────── */
  --sh-1:   0 2px 8px rgba(15,23,42,.08), 0 0 0 1px rgba(15,23,42,.04);   /* card       */
  --sh-2:   0 8px 24px rgba(15,23,42,.12), 0 0 0 1px rgba(15,23,42,.04);  /* modal/hero */
  --sh-btn: 0 4px 14px rgba(15,184,184,.28);                             /* teal glow  */

  /* ── Fonts ──────────────────────────────────────────────────────── */
  --font-ui:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-num: 'DM Mono', 'Roboto Mono', ui-monospace, monospace;  /* BP values (fixed-width) */
}