/* tokens.css: Cards design tokens, Direction B "Teal Instrument". See /BRAND.md.
   Source of truth for every color, font, size and radius on cards.doctorarichai.com, and linked at runtime by
   stat.doctorarichai.com (served with CORS and a 5-minute cache from /assets/). Link it BEFORE site.css.
   Google Fonts: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&family=Montserrat:wght@600;700&display=swap
   Do not hard-code colors anywhere else. Contrast and colorblind checks: BRAND.md section 9.
   Generated from the brand toolkit (directions.py, direction B); edit there or keep this file and BRAND.md in sync. */
:root {
  color-scheme: light;
  /* Surfaces and text */
  --bg: #ECF1F2;
  --surface: #FFFFFF;
  --surface-2: #F3F7F8;
  --field: #FFFFFF;
  --ink: #1B2A30;
  --ink-2: #34474F;
  --muted: #4D6068;
  /* Lines */
  --line: #C0CCD0;
  --line-subtle: #DFE6E8;
  --line-control: #6F8289;
  /* Brand: teal is identity AND interactive; plum appears only as the heart mark */
  --brand: #00738C;
  --brand-strong: #005A6E;
  --brand-soft: #DFF0F4;
  --on-brand: #FFFFFF;
  /* Shared nav bar */
  --nav-bg: #0A4652;
  --nav-ink: #FFFFFF;
  --nav-dim: #CEDADC;
  --nav-active: #7FD3E3;
  --mark-bg: #8F4469;
  --mark-ink: #FFFFFF;
  /* Interactive */
  --link: #00738C;
  --link-hover: #004B5B;
  --on-link: #FFFFFF;
  --focus: #00738C;
  --selected-bg: var(--brand-soft);
  /* Component roles */
  --title-ink: var(--ink);
  --section-ink: var(--ink-2);
  --section-mark: var(--brand);
  --hero-ink: var(--ink);
  --panel-rule: var(--brand);
  --btn-primary-bg: var(--brand);
  --btn-primary-ink: var(--on-brand);
  --btn-primary-hover: var(--brand-strong);
  /* Status: always with an icon and words; never used for risk */
  --info-fg: #005A6E;
  --info-bg: #E5F3F6;
  --info-line: #0096B0;
  --success-fg: #2F6410;
  --success-bg: #EBF4E4;
  --success-line: #428615;
  --caution-fg: #6B4E00;
  --caution-bg: #FFF7DF;
  --caution-line: #FFC72C;
  --danger-fg: #9B0A27;
  --danger-bg: #FBE9EC;
  --danger-line: #BA0C2F;
  /* Risk ramp, shared by every tool and every brand direction. Ordinal: 1 = lowest risk. Never color alone. */
  --risk-1: #CA7620; --risk-1-on: #1D2427;
  --risk-2: #BD5711; --risk-2-on: #FFFFFF;
  --risk-3: #AD3202; --risk-3-on: #FFFFFF;
  --risk-4: #941714; --risk-4-on: #FFFFFF;
  --risk-5: #710F1A; --risk-5-on: #FFFFFF;
  --risk-band-alpha: 0.07;
  /* Three-level risk scales (SCD Low / Intermediate / High) use ramp steps 1, 3, 5 */
  --scd-low: var(--risk-1); --scd-low-on: var(--risk-1-on);
  --scd-mid: var(--risk-3); --scd-mid-on: var(--risk-3-on);
  --scd-high: var(--risk-5); --scd-high-on: var(--risk-5-on);
  /* Type: Montserrat for titles only, IBM Plex Sans for UI text, IBM Plex Mono for every number */
  --font-head: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-num: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-wordmark: var(--font-head);
  --num-figures: tabular-nums lining-nums;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-hero: 36px;
  --lh: 1.45;
  --w-head: 600; --w-section: 600; --w-strong: 600; --w-hero: 500;
  /* Shape, density, spacing */
  --radius: 4px; --radius-sm: 3px; --radius-pill: 999px;
  --control-h: 32px; --panel-rule-w: 2px; --nav-h: 40px;
  --space-1: 4px; --space-2: 6px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 24px;
  --content-max: 1040px; --gutter: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    /* Surfaces and text */
    --bg: #0E181B;
    --surface: #15242A;
    --surface-2: #111F24;
    --field: #111F24;
    --ink: #E4EBED;
    --ink-2: #BDCBD0;
    --muted: #94A7AE;
    /* Lines */
    --line: #2B3F46;
    --line-subtle: #1F3138;
    --line-control: #6E868E;
    /* Brand: teal is identity AND interactive; plum appears only as the heart mark */
    --brand: #4FC0D6;
    --brand-strong: #8AD8E6;
    --brand-soft: #123A44;
    --on-brand: #0B1417;
    /* Shared nav bar */
    --nav-bg: #0A2C34;
    --nav-ink: #FFFFFF;
    --nav-dim: #C9D1D2;
    --nav-active: #4FC0D6;
    --mark-bg: #8F4469;
    --mark-ink: #FFFFFF;
    /* Interactive */
    --link: #4FC0D6;
    --link-hover: #8AD8E6;
    --on-link: #0B1417;
    --focus: #4FC0D6;
    --selected-bg: var(--brand-soft);
    /* Component roles */
    --title-ink: var(--ink);
    --section-ink: var(--ink-2);
    --section-mark: var(--brand);
    --hero-ink: var(--ink);
    --panel-rule: var(--brand);
    --btn-primary-bg: var(--brand);
    --btn-primary-ink: var(--on-brand);
    --btn-primary-hover: var(--brand-strong);
    /* Status: always with an icon and words; never used for risk */
    --info-fg: #8AD3E2;
    --info-bg: #12343C;
    --info-line: #0096B0;
    --success-fg: #9CCF7E;
    --success-bg: #1F3319;
    --success-line: #67A141;
    --caution-fg: #FFD873;
    --caution-bg: #3B3216;
    --caution-line: #FFC72C;
    --danger-fg: #FF9AA8;
    --danger-bg: #44191F;
    --danger-line: #FF6B7D;
    /* Risk ramp, shared by every tool and every brand direction. Ordinal: 1 = lowest risk. Never color alone. */
    --risk-1: #FFD3AB; --risk-1-on: #10171A;
    --risk-2: #FFB486; --risk-2-on: #10171A;
    --risk-3: #FE9168; --risk-3-on: #10171A;
    --risk-4: #FE674C; --risk-4-on: #10171A;
    --risk-5: #EB4945; --risk-5-on: #10171A;
    --risk-band-alpha: 0.1;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  /* Surfaces and text */
  --bg: #0E181B;
  --surface: #15242A;
  --surface-2: #111F24;
  --field: #111F24;
  --ink: #E4EBED;
  --ink-2: #BDCBD0;
  --muted: #94A7AE;
  /* Lines */
  --line: #2B3F46;
  --line-subtle: #1F3138;
  --line-control: #6E868E;
  /* Brand: teal is identity AND interactive; plum appears only as the heart mark */
  --brand: #4FC0D6;
  --brand-strong: #8AD8E6;
  --brand-soft: #123A44;
  --on-brand: #0B1417;
  /* Shared nav bar */
  --nav-bg: #0A2C34;
  --nav-ink: #FFFFFF;
  --nav-dim: #C9D1D2;
  --nav-active: #4FC0D6;
  --mark-bg: #8F4469;
  --mark-ink: #FFFFFF;
  /* Interactive */
  --link: #4FC0D6;
  --link-hover: #8AD8E6;
  --on-link: #0B1417;
  --focus: #4FC0D6;
  --selected-bg: var(--brand-soft);
  /* Component roles */
  --title-ink: var(--ink);
  --section-ink: var(--ink-2);
  --section-mark: var(--brand);
  --hero-ink: var(--ink);
  --panel-rule: var(--brand);
  --btn-primary-bg: var(--brand);
  --btn-primary-ink: var(--on-brand);
  --btn-primary-hover: var(--brand-strong);
  /* Status: always with an icon and words; never used for risk */
  --info-fg: #8AD3E2;
  --info-bg: #12343C;
  --info-line: #0096B0;
  --success-fg: #9CCF7E;
  --success-bg: #1F3319;
  --success-line: #67A141;
  --caution-fg: #FFD873;
  --caution-bg: #3B3216;
  --caution-line: #FFC72C;
  --danger-fg: #FF9AA8;
  --danger-bg: #44191F;
  --danger-line: #FF6B7D;
  /* Risk ramp, shared by every tool and every brand direction. Ordinal: 1 = lowest risk. Never color alone. */
  --risk-1: #FFD3AB; --risk-1-on: #10171A;
  --risk-2: #FFB486; --risk-2-on: #10171A;
  --risk-3: #FE9168; --risk-3-on: #10171A;
  --risk-4: #FE674C; --risk-4-on: #10171A;
  --risk-5: #EB4945; --risk-5-on: #10171A;
  --risk-band-alpha: 0.1;
}