/* ====================================================================
 * STRATOS TECH — DESIGN TOKENS v3.0
 * Direction 32: Roman / Hims Telehealth — The Operator's Protocol
 * Dark teal + sage + cream + caramel. Light + dark mode.
 * Locked 2026-05-08. Replaces v2.0 Forest+Brass.
 * ==================================================================== */

:root {
  /* ============ COLOR — LIGHT MODE (default) ============ */
  /* D32 v3.1 — Roman/Hims rebalanced: TAN-dominant, sage as accent only, caramel up-prominent */
  /* Surfaces — warm tan/parchment */
  --color-bg:           #ede4cc;
  --color-bg-2:         #e0d4b6;
  --color-surface:      #f7f1de;
  --color-surface-2:    #ede2c5;

  /* Primary — DARK FOREST/TEAL (mixed greens/browns from locked viz). Used in sidebar + headers. */
  --color-primary:      #1f3a32;
  --color-primary-700:  #0f231d;
  --color-primary-600:  #2d4d44;
  --color-primary-400:  #527068;
  --color-primary-200:  #b8c8c0;
  --color-primary-100:  #d8e0d8;
  --color-primary-50:   #ebefea;

  /* Accent — SAGE GREEN (back from viz), used for active state and success */
  --color-accent:       #94a37c;
  --color-accent-700:   #6b7858;
  --color-accent-600:   #7d8c66;
  --color-accent-400:   #adb893;
  --color-accent-200:   #d4dcc4;
  --color-accent-100:   #e3e9d8;
  --color-accent-50:    #f0f3e8;

  /* Tertiary — caramel, the DOMINANT warm accent (eyebrows, dividers, premium states) */
  --color-tertiary:     #9c7a3e;
  --color-tertiary-600: #7a5e2c;
  --color-tertiary-400: #b89968;
  --color-tertiary-200: #d8c294;
  --color-tertiary-100: #e8d8b8;
  --color-tertiary-50:  #f2e8d0;

  /* Text — match locked viz: warm dark brown, NOT teal */
  --color-text:         #2d2418;
  --color-text-2:       #6e5e4a;
  --color-text-3:       #9c8a73;
  --color-text-inverse: #f7f1de;

  /* Borders — caramel-tinted */
  --color-border:       #d8c8a8;
  --color-border-2:     #b8a47e;
  --color-border-strong:#9c8a73;

  /* ============ COMPUTED HELPERS for sidebar mixing ============ */
  /* Default text color INSIDE sidebar (cream against dark teal) */
  --color-text-on-primary: #ede4cc;

  /* Status */
  --color-success:      #4a7d5c;
  --color-success-bg:   #d8e8dc;
  --color-danger:       #c44536;
  --color-danger-bg:    #f4d8d2;
  --color-warning:      #d97706;
  --color-warning-bg:   #f8e3c4;
  --color-info:         #1a3a3a;
  --color-info-bg:      #d8e3e3;

  /* ============ TYPOGRAPHY ============ */
  --font-serif: 'Source Serif 4', 'Source Serif Pro', Charter, 'Iowan Old Style', Georgia, serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --fs-display:   44px;
  --fs-h1:        32px;
  --fs-h2:        24px;
  --fs-h3:        18px;
  --fs-h4:        16px;
  --fs-body:      15px;
  --fs-small:     13px;
  --fs-micro:     11px;

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

  --lh-tight:     1.2;
  --lh-snug:      1.4;
  --lh-body:      1.6;

  --tracking-tight:  -0.012em;
  --tracking-normal: 0;
  --tracking-loose:  0.04em;
  --tracking-cap:    0.12em;
  --tracking-eyebrow: 0.16em;

  /* ============ SPACING ============ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ============ RADIUS ============ */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 20px;
  --radius-pill: 999px;

  /* ============ ELEVATION ============ */
  --elev-0: none;
  --elev-1: 0 1px 0 rgba(13, 36, 36, 0.04);
  --elev-2: 0 1px 3px rgba(13, 36, 36, 0.06), 0 1px 2px rgba(13, 36, 36, 0.04);
  --elev-3: 0 8px 24px rgba(13, 36, 36, 0.08), 0 2px 6px rgba(13, 36, 36, 0.04);
  --elev-card: 0 1px 0 rgba(13, 36, 36, 0.05);

  /* ============ MOTION ============ */
  --motion-fast:   120ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-base:   200ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-slow:   320ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ============ LAYOUT ============ */
  --container-max:  1280px;
  --container-narrow: 760px;
  --sidebar-w: 220px;
  --topbar-h: 56px;
}

/* DARK MODE DISABLED — Stratos Tech is light-mode only (tan/walnut/caramel always). */
:root { color-scheme: light; }

/* ============ LEGACY ALIASES — map old D1 var names to D32 tokens ============
   Why: exam pages (CIC/S3/S30/RE/HIC v1/v2) use --stratos, --bg, --card, --good,
   --bad, --muted, --text, --border, --accent, --accent-2, --warn, --mark, etc.
   These were never migrated to D32. Aliases keep those pages styled correctly
   without rewriting 18 files of inline CSS. */
:root {
  --bg:        var(--color-bg);
  --bg-2:      var(--color-bg-2);
  --surface:   var(--color-surface);
  --surface2:  var(--color-surface-2);
  --card:      var(--color-surface);
  --text:      var(--color-text);
  --muted:     var(--color-text-2);
  --border:    var(--color-border);
  --accent:    var(--color-primary);
  --accent-2:  var(--color-accent);
  --stratos:   var(--color-accent);
  --good:      var(--color-success);
  --bad:       var(--color-danger);
  --warn:      var(--color-warning);
  --mark:      var(--color-tertiary);
}