/* ============================================================================
   OpenLoop Health — Design Tokens
   ----------------------------------------------------------------------------
   Source of truth for color, type, spacing, radii, shadows, and motion.
   Brand colors are pulled directly from the OpenLoop brand sheet:
     Primary   #e90054   (Magenta)
     Secondary #1f1f1f   (Ink)
     Accent    #46b9a6   (Teal)
     Accent    #ff6b35   (Coral)
     Accent    #3f51b5   (Indigo)
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ── Brand: Magenta (Primary) ─────────────────────────────────────────── */
  --magenta-50:  #fff1f6;
  --magenta-100: #ffd9e6;
  --magenta-200: #ffadc9;
  --magenta-300: #ff7aa6;
  --magenta-400: #f8407e;
  --magenta-500: #e90054;   /* ← brand primary */
  --magenta-600: #c40047;
  --magenta-700: #98003a;
  --magenta-800: #6e002a;
  --magenta-900: #45001a;

  /* ── Brand: Ink (Secondary) ───────────────────────────────────────────── */
  --ink-50:  #f6f6f6;
  --ink-100: #e9e9e9;
  --ink-200: #cfcfcf;
  --ink-300: #a8a8a8;
  --ink-400: #767676;
  --ink-500: #4a4a4a;
  --ink-600: #303030;
  --ink-700: #262626;
  --ink-800: #1f1f1f;       /* ← brand secondary */
  --ink-900: #111111;

  /* ── Accent: Teal (calm / clinical) ───────────────────────────────────── */
  --teal-50:  #ecfaf7;
  --teal-100: #c8efe7;
  --teal-200: #93dfcd;
  --teal-300: #62cdb5;
  --teal-400: #46b9a6;      /* ← brand accent */
  --teal-500: #2ea090;
  --teal-600: #1d8073;
  --teal-700: #155d54;

  /* ── Accent: Coral (energy / nudge) ───────────────────────────────────── */
  --coral-50:  #fff3ec;
  --coral-100: #ffd9c2;
  --coral-200: #ffb38a;
  --coral-300: #ff8c5a;
  --coral-400: #ff6b35;     /* ← brand accent */
  --coral-500: #e25320;
  --coral-600: #b53f15;
  --coral-700: #82290b;

  /* ── Brand: Navy (logo wordmark color) ────────────────────────────────── */
  --navy-50:  #eef0f5;
  --navy-100: #d3d8e3;
  --navy-200: #a3acc3;
  --navy-300: #6b78a0;
  --navy-400: #3e4d7b;
  --navy-500: #25325c;
  --navy-600: #1a2449;
  --navy-700: #152149;   /* ← logo wordmark */
  --navy-800: #0f1838;
  --navy-900: #080d20;

  /* ── Accent: Indigo (data / authority) ────────────────────────────────── */
  --indigo-50:  #eef0fb;
  --indigo-100: #d6daf5;
  --indigo-200: #a8b0e6;
  --indigo-300: #7984d4;
  --indigo-400: #5765c4;
  --indigo-500: #3f51b5;    /* ← brand accent */
  --indigo-600: #2f3f99;
  --indigo-700: #232f73;

  /* ── Surface neutrals (warm-cool balanced) ────────────────────────────── */
  --surface-canvas:  #fafafa;
  --surface-raised:  #ffffff;
  --surface-sunken:  #f3f3f4;
  --surface-overlay: rgba(31, 31, 31, 0.55);
  --surface-line:    #e6e6e8;
  --surface-line-strong: #cfcfd2;

  /* ── Semantic state colors ────────────────────────────────────────────── */
  --state-success-bg:   #ecfaf7;
  --state-success-fg:   #155d54;
  --state-success-line: #62cdb5;

  --state-warning-bg:   #fff3ec;
  --state-warning-fg:   #82290b;
  --state-warning-line: #ff8c5a;

  --state-error-bg:     #fff1f6;
  --state-error-fg:     #98003a;
  --state-error-line:   #f8407e;

  --state-info-bg:      #eef0fb;
  --state-info-fg:      #232f73;
  --state-info-line:    #7984d4;

  /* ── Text roles ───────────────────────────────────────────────────────── */
  --text-strong:  var(--ink-900);
  --text-default: var(--ink-800);
  --text-muted:   var(--ink-500);
  --text-subtle:  var(--ink-400);
  --text-inverse: #ffffff;
  --text-brand:   var(--magenta-500);
  --text-link:    var(--magenta-600);

  /* ── Type system ──────────────────────────────────────────────────────── */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* Modular scale (1.200 — minor third). Body anchored at 16px. */
  --fs-overline: 12px;
  --fs-caption:  13px;
  --fs-small:    14px;
  --fs-body:     16px;
  --fs-lead:     18px;
  --fs-h6:       18px;
  --fs-h5:       20px;
  --fs-h4:       24px;
  --fs-h3:       30px;
  --fs-h2:       38px;
  --fs-h1:       48px;
  --fs-display:  64px;

  --lh-tight:    1.10;
  --lh-snug:     1.25;
  --lh-normal:   1.45;
  --lh-relaxed:  1.6;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.08em;

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

  /* ── Spacing scale (4px base) ─────────────────────────────────────────── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;

  /* ── Radii ────────────────────────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 9999px;

  /* ── Shadows (low-elevation, medical-clean) ───────────────────────────── */
  --shadow-xs: 0 1px 1px rgba(17, 17, 17, 0.04);
  --shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.06), 0 1px 3px rgba(17, 17, 17, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(17, 17, 17, 0.08), 0 2px 4px -2px rgba(17, 17, 17, 0.05);
  --shadow-lg: 0 12px 24px -8px rgba(17, 17, 17, 0.14), 0 4px 8px -4px rgba(17, 17, 17, 0.06);
  --shadow-xl: 0 24px 48px -16px rgba(17, 17, 17, 0.20), 0 8px 16px -8px rgba(17, 17, 17, 0.08);
  --shadow-focus: 0 0 0 3px rgba(233, 0, 84, 0.25);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl: 1440px;
}

/* ── Base resets useful for the design-system preview cards ─────────────── */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--text-default);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }

/* Type utilities mapped to the role system */
.t-display  { font-size: var(--fs-display); line-height: var(--lh-tight);  letter-spacing: var(--tracking-tight); font-weight: var(--fw-bold);     color: var(--text-strong); }
.t-h1       { font-size: var(--fs-h1);      line-height: var(--lh-tight);  letter-spacing: var(--tracking-tight); font-weight: var(--fw-bold);     color: var(--text-strong); }
.t-h2       { font-size: var(--fs-h2);      line-height: var(--lh-tight);  letter-spacing: var(--tracking-snug);  font-weight: var(--fw-bold);     color: var(--text-strong); }
.t-h3       { font-size: var(--fs-h3);      line-height: var(--lh-snug);   letter-spacing: var(--tracking-snug);  font-weight: var(--fw-semibold); color: var(--text-strong); }
.t-h4       { font-size: var(--fs-h4);      line-height: var(--lh-snug);   letter-spacing: var(--tracking-snug);  font-weight: var(--fw-semibold); color: var(--text-strong); }
.t-h5       { font-size: var(--fs-h5);      line-height: var(--lh-snug);   font-weight: var(--fw-semibold); color: var(--text-strong); }
.t-h6       { font-size: var(--fs-h6);      line-height: var(--lh-snug);   font-weight: var(--fw-semibold); color: var(--text-strong); }
.t-lead     { font-size: var(--fs-lead);    line-height: var(--lh-relaxed); color: var(--text-default); }
.t-body     { font-size: var(--fs-body);    line-height: var(--lh-normal); color: var(--text-default); }
.t-small    { font-size: var(--fs-small);   line-height: var(--lh-normal); color: var(--text-muted); }
.t-caption  { font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--text-muted); }
.t-overline { font-size: var(--fs-overline); line-height: 1; letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--text-muted); }