/* Deriva Design System tokens — extracted from the standalone email
   templates reference (the design system's :root variable blocks).
   Fonts (Instrument Serif, Inter, JetBrains Mono) load via Google Fonts. */

:root {
  /* ── INK · warm neutrals (never pure black) ────────────────────── */
  --ink:    #1a1a1a;   /* primary text */
  --ink-2:  #6a6460;   /* body text */
  --ink-3:  #9e9690;   /* caption / secondary */
  --ink-4:  #c5bfb9;   /* placeholder / disabled */

  /* ── SURFACE · backgrounds & borders ──────────────────────────── */
  --surface-cream:    #fdfcf9;   /* warm app background */
  --surface-clinical: #f5f4fa;   /* clinical / report background */
  --border:           #e6dfd4;   /* default warm border */
  --glass:            rgba(255,255,255,0.62);   /* glass card fill */
  --glass-border:     rgba(255,255,255,0.9);    /* glass card border */

  /* ── VIOLET · brand, CTA, AI actions ──────────────────────────── */
  --violet-25:  #FAFAFF; --violet-50:  #F5F3FF; --violet-100: #EDE9FE;
  --violet-200: #DDD6FE; --violet-300: #C4B5FD; --violet-500: #8B5CF6;
  --violet-600: #7C3AED; --violet-700: #6D28D9;
  --accent: var(--violet-600);          /* brand accent */
  --accent-bg: rgba(124,58,237,0.08);   /* tinted accent surface */

  /* ── CLINICAL SEMANTIC SCALES ─────────────────────────────────── */
  /* Rose Crimson · error / Pathogenic (P) */
  --rose-25: #FFF1F2; --rose-50: #FFE4E6; --rose-100: #FDA4AF;
  --rose-200: #F43F5E; --rose-300: #E10348; --rose-500: #9F1239;
  /* Coral · warning / Likely Pathogenic (LP) */
  --coral-25: #FFF7ED; --coral-50: #FFEDD5; --coral-100: #FDBA74;
  --coral-200: #F97316; --coral-300: #EA580C; --coral-500: #C2410C;
  /* Amber · VUS */
  --amber-25: #FFFBE8; --amber-50: #FEF3C7; --amber-100: #FCD34D;
  --amber-200: #F59E0B; --amber-300: #D97706;
  /* Emerald · Likely Benign (LB) */
  --emerald-50: #D1FAE5; --emerald-300: #10B981;
  /* Green · Benign (B) */
  --green-50: #ECFDF5; --green-300: #059669;

  /* ── SEMANTIC CLASSIFICATION ALIASES ──────────────────────────── */
  --p:   #e10348; --p-bg:   #fff1f2;   /* Pathogenic */
  --lp:  #ea580c; --lp-bg:  #fff7ed;   /* Likely Pathogenic */
  --vus: #d97706; --vus-bg: #fffbe8;   /* VUS */
  --lb:  #10b981; --lb-bg:  #d1fae5;   /* Likely Benign */
  --b:   #059669; --b-bg:   #ecfdf5;   /* Benign */

  /* ── FONT FAMILIES ────────────────────────────────────────────── */
  --f-d: 'Instrument Serif', Georgia, serif;   /* Display · emotional moments */
  --f-b: 'Inter', system-ui, sans-serif;       /* Body & UI */
  --f-m: 'JetBrains Mono', monospace;          /* Clinical notation, labels */

  /* ── DISPLAY · Instrument Serif ───────────────────────────────── */
  --fs-display-lg: 36px; --lh-display-lg: 1.15;
  --fs-display-md: 28px; --lh-display-md: 1.2;
  --fs-display-sm: 22px; --lh-display-sm: 1.25;

  /* ── HEADING · Inter 600 ──────────────────────────────────────── */
  --fs-heading-md: 18px; --lh-heading-md: 1.3;
  --fs-heading-sm: 14px; --lh-heading-sm: 1.4;

  /* ── BODY · Inter 400 ─────────────────────────────────────────── */
  --fs-body-lg: 16px;  --lh-body-lg: 1.8;
  --fs-body-md: 14px;  --lh-body-md: 1.7;
  --fs-body-sm: 12px;  --lh-body-sm: 1.6;

  /* ── LABEL · Inter 600 · eyebrows, metadata, CTAs ─────────────── */
  --fs-label-md: 11px; --ls-label-md: 0.1em;
  --fs-label-sm: 10px; --ls-label-sm: 0.08em;

  /* ── CLINICAL · JetBrains Mono ────────────────────────────────── */
  --fs-clinical-lg: 16px;
  --fs-clinical-md: 13px;
  --fs-clinical-sm: 11px;

  /* ── 8px SPACING GRID ─────────────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* ── RADII ────────────────────────────────────────────────────── */
  --rc:    16px;   /* card radius */
  --r-lg:  20px;   /* large panels / modals */
  --r-md:  12px;   /* rows, banners */
  --r-sm:  10px;   /* buttons, inputs */
  --r-xs:  8px;    /* small buttons, menu items */
  --r-chip: 3px;   /* classification chips */

  /* ── ELEVATION · glass shadow system ──────────────────────────── */
  --shadow-glass: 0 1px 0 rgba(255,255,255,0.92) inset, 0 2px 16px rgba(0,0,0,0.05), 0 4px 24px rgba(124,58,237,0.06);
  --shadow-glass-hover: 0 1px 0 rgba(255,255,255,0.96) inset, 0 0 0 1.5px rgba(124,58,237,0.12), 0 8px 32px rgba(124,58,237,0.13);
  --shadow-modal: 0 1px 0 rgba(255,255,255,0.96) inset, 0 8px 40px rgba(0,0,0,0.10), 0 4px 32px rgba(124,58,237,0.07);
  --shadow-btn: 0 2px 8px rgba(124,58,237,0.3);

  /* ── EASING ───────────────────────────────────────────────────── */
  --ease-arrive: cubic-bezier(.22,.68,0,1.1);
  --dur-fast: .12s;
  --dur-base: .18s;
  --dur-slow: .5s;
}

/* ── SIGNATURE KEYFRAMES ─────────────────────────────────────────── */
@keyframes sparkle { 0%,100%{opacity:1;transform:scale(1) rotate(0deg)} 40%{opacity:.3;transform:scale(.65) rotate(22deg)} 60%{opacity:.5;transform:scale(.75) rotate(-10deg)} }
@keyframes glow-breathe { 0%,100%{opacity:.7} 50%{opacity:1} }
@keyframes aso-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(124,58,237,0)} 50%{box-shadow:0 0 18px 2px rgba(124,58,237,0.1)} }
@keyframes fadein { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes cv-arrive { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes shimmer-ds { 0%{background-position:-400px 0} 100%{background-position:400px 0} }