/* ============================================================
   Design tokens — Mend Care / Nexicd
   Loaded BEFORE inline <style> in index.html so cascade order
   lets page-level overrides beat these defaults.
   ============================================================ */

:root {
  /* -------- Primitive palette -------- */
  /* Neutrals (3-tone text ramp + surface ramp) */
  --n-0:   #FFFFFF;
  --n-50:  #F8FAFC;
  --n-100: #F1F5F9;
  --n-200: #E5E7EB;
  --n-300: #D4D7DE;
  --n-400: #9CA3AF;
  --n-600: #4B5563;
  --n-900: #111827;

  /* Brand (teal) — used ONLY for brand surfaces + primary CTA */
  --brand-500: #0D9488;
  --brand-600: #0F766E;
  --brand-700: #0B7C72;  /* AA-compliant teal text on white */

  /* Clinical status hues — independent family so brand can change
     without moving diagnosis colours */
  --clinical-confirmed: #0F766E;
  --clinical-suspected: #C2410C;
  --clinical-symptom:   #1D4ED8;

  /* Care-action (KVÅ) hue */
  --kva-500: #6D28D9;
  --kva-700: #5B21B6;
  --kva-100: #EDE9FE;

  /* Feedback / system hues */
  --feedback-error-500:   #DC2626;
  --feedback-error-700:   #991B1B;
  --feedback-warn-500:    #D97706;
  --feedback-warn-700:    #92400E;
  --feedback-success-700: #047857;
  --feedback-info-700:    #1D4ED8;

  /* Live-capture hue — semantically distinct from error red */
  --live-500: #E11D48;

  /* -------- Semantic aliases (use these in components) -------- */
  --color-text-primary:   var(--n-900);
  --color-text-secondary: var(--n-600);
  --color-text-muted:     var(--n-600);  /* AA on white (7:1); --n-400 kept for decorative use only */

  --color-surface:        var(--n-0);
  --color-surface-alt:    var(--n-50);
  --color-surface-sunken: var(--n-100);
  --color-border:         var(--n-200);
  --color-border-strong:  var(--n-300);
  --color-bg:             #F3F4F6;

  --color-brand:          var(--brand-500);
  --color-brand-hover:    var(--brand-600);
  --color-brand-text:     var(--brand-700);
  --color-brand-subtle:   rgba(13, 148, 136, 0.08);
  --color-brand-border:   rgba(13, 148, 136, 0.22);

  --color-status-confirmed:  var(--clinical-confirmed);
  --color-status-suspected:  var(--clinical-suspected);
  --color-status-symptom:    var(--clinical-symptom);
  --color-status-deselected: var(--color-text-muted);

  --color-feedback-error:   var(--feedback-error-500);
  --color-feedback-warn:    var(--feedback-warn-500);
  --color-feedback-success: var(--feedback-success-700);
  --color-feedback-info:    var(--feedback-info-700);

  --color-state-recording: var(--live-500);

  --color-kva:        var(--kva-700);
  --color-kva-subtle: var(--kva-100);

  /* -------- Type scale (6 steps) -------- */
  --fs-xs:  12px;   /* labels, meta, mono codes */
  --fs-sm:  14px;   /* body default (was 13px everywhere) */
  --fs-md:  16px;   /* form inputs, emphasised body */
  --fs-lg:  18px;   /* card headings */
  --fs-xl:  22px;   /* page / section headings */
  --fs-2xl: 28px;   /* hero numerics (quality score) */

  --lh-tight: 1.25;
  --lh-body:  1.5;
  --lh-loose: 1.7;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;

  /* -------- Spacing (4 steps, 4px base) -------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 16px;
  --sp-4: 32px;

  /* -------- Radii -------- */
  --radius-sm:   6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-pill: 999px;

  /* -------- Elevation -------- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-focus: 0 0 0 3px var(--color-brand-border);

  /* -------- Motion -------- */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --easing-std:  cubic-bezier(0.2, 0, 0, 1);
}