/* ============================================================
   Debts or Death — reconstructed design tokens
   Recreated from the handoff README "Design Tokens" section to
   replace the missing _ds token CSS. Defines every CSS custom
   property referenced by app.bundle.jsx (49 vars) + helpers.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Libre+Franklin:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Fonts ── */
  --font-sans: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  /* ── Brand: oxblood ── */
  --oxblood-50:  #FBF1F1;
  --oxblood-400: #B0414E;
  --oxblood-500: #8E2A37;
  --oxblood-600: #7A1E2A;
  --oxblood-700: #6B1722;

  /* ── Accent: gold ── */
  --gold-400: #D6BE7E;
  --gold-500: #C2A14D;
  --gold-600: #A6862F;

  /* ── Paper / ink ── */
  --white: #FFFFFF;
  --cream-100: #FBF7EF;
  --ink-900: #1A1416;

  /* ── Neutrals: slate ── */
  --slate-50:  #F8FAFC;
  --slate-100: #F1F4F8;
  --slate-200: #E4E9F0;
  --slate-300: #CBD4E0;
  --slate-400: #94A2B5;
  --slate-500: #6B7A8F;
  --slate-600: #4F5C6E;
  --slate-700: #3A4555;
  --slate-800: #283140;
  --slate-900: #161D29;

  /* ── Text ── */
  --text-body:  #2B3442;
  --text-muted: #687587;
  --text-faint: #97A2B2;

  /* ── Borders ── */
  --border-subtle:  #ECEFF4;
  --border-default: #DCE2EB;

  /* ── Risk scale ── */
  --risk-low:      #3F9D6A;
  --risk-moderate: #D9A23B;
  --risk-high:     #E07A38;
  --risk-severe:   #D6483B;
  --risk-critical: #8E2A37;

  /* ── Semantic: success ── */
  --success-100: #DCF2E5;
  --success-500: #3F9D6A;
  --success-600: #2F7E54;

  /* ── Semantic: warning ── */
  --warning-100: #FBEFD6;
  --warning-700: #9A6B11;

  /* ── Semantic: danger ── */
  --danger-100: #FBE3E3;
  --danger-500: #D6483B;
  --danger-600: #C0392E;
  --danger-700: #9E2C23;

  /* ── Semantic: info ── */
  --info-100: #DEEBF8;
  --info-700: #2C5F92;

  /* ── Shape ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* ── Depth ── */
  --shadow-xs: 0 1px 2px rgba(22, 29, 41, 0.05);
  --shadow-sm: 0 1px 3px rgba(22, 29, 41, 0.08), 0 1px 2px rgba(22, 29, 41, 0.05);
  --shadow-md: 0 6px 16px rgba(22, 29, 41, 0.09);
  --shadow-lg: 0 14px 34px rgba(22, 29, 41, 0.12);

  /* ── Layout ── */
  --sidebar-w: 264px;
  --topbar-h: 64px;
  --content-max: 1240px;
  --surface-page: #F4F6FA;

  /* ── Motion ── */
  --dur-fast: 0.13s;
  --dur-base: 0.22s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--surface-page); color: var(--text-body); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
.dod-tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
button { font-family: var(--font-sans); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 6px; border: 3px solid var(--surface-page); }
::-webkit-scrollbar-thumb:hover { background: var(--slate-400); }

/* ── Help & Guide rendered documentation ── */
.dod-doc h1 { font-size: 22px; font-weight: 800; color: var(--slate-900); margin: 6px 0 14px; line-height: 1.25; }
.dod-doc h2 { font-size: 17px; font-weight: 700; color: var(--slate-900); margin: 26px 0 10px; padding-top: 16px; border-top: 1px solid var(--border-subtle); }
.dod-doc h3 { font-size: 14.5px; font-weight: 700; color: var(--oxblood-700); margin: 18px 0 7px; }
.dod-doc p { margin: 9px 0; }
.dod-doc ul { margin: 8px 0 8px 2px; padding-left: 20px; }
.dod-doc li { margin: 4px 0; }
.dod-doc strong { color: var(--slate-900); font-weight: 700; }
.dod-doc code { font-family: var(--font-mono); font-size: 12.5px; background: var(--slate-100); padding: 1px 6px; border-radius: 5px; color: var(--oxblood-700); }
.dod-doc hr { border: none; border-top: 1px solid var(--border-subtle); margin: 22px 0; }
.dod-doc blockquote { margin: 14px 0; padding: 11px 15px; background: var(--oxblood-50); border-left: 3px solid var(--oxblood-500); border-radius: 0 8px 8px 0; color: var(--slate-700); font-size: 13.5px; }
.dod-doc table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 13px; }
.dod-doc th { text-align: left; background: var(--slate-50); border: 1px solid var(--border-default); padding: 8px 11px; font-weight: 700; color: var(--slate-800); }
.dod-doc td { border: 1px solid var(--border-default); padding: 8px 11px; vertical-align: top; color: var(--text-body); }
.dod-doc a { color: var(--oxblood-700); }
.dod-doc table { display: block; overflow-x: auto; }
@media (min-width: 720px) { .dod-doc table { display: table; } }