/* DocsUnderstood — Design Tokens
   Source of truth: /Library page in DocsUnderstood.fig
   Updated April 2026 — fonts and palette reconciled to the Figma library. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ─── Color · Light theme ─────────────────────────── */
  /* Backgrounds — three steps, all warm-neutral white */
  --color-bg:            #FEFEFE;  /* Light/primary  */
  --color-surface:       #FAFAFA;  /* Light/secondary */
  --color-surface-2:     #F5F5F5;  /* Light/tertiary */

  /* Borders */
  --color-border:        #E3E3E3;
  --color-border-strong: #DEDEDE;
  --color-border-quiet:  #EAEAEA;

  /* Text — four steps, warm near-black to silver */
  --color-text:          #111119;  /* Light/title  — headings, primary text */
  --color-text-2:        #3B3835;  /* Light/body   — paragraph */
  --color-text-3:        #727272;  /* Light/body 2 — secondary, captions */
  --color-text-4:        #C0C0C0;  /* Light/label  — disabled, hints */

  /* Brand accents */
  --color-brand-blue:    #2E64E5;
  --color-brand-blue-2:  #224FBC;  /* hover/pressed */
  --color-brand-blue-bg: #EEF3FE;
  --color-brand-yellow:  #FAF813;  /* signature highlight — use sparingly */

  /* Aliases for app use */
  --color-primary:       var(--color-brand-blue);
  --color-primary-hover: var(--color-brand-blue-2);
  --color-accent:        var(--color-brand-yellow);

  /* Semantic */
  --color-success:       #13671E;
  --color-success-2:     #0A6015;
  --color-success-bg:    #F2FCF4;
  --color-success-line:  #9BE1A9;

  --color-warning:       #9747FF;  /* mapped from Figma "purple stroke" review accent */
  --color-warning-bg:    #F4ECFF;

  --color-error:         #B91C1C;
  --color-error-bg:      #FEF2F2;

  --color-info:          var(--color-brand-blue);
  --color-info-bg:       var(--color-brand-blue-bg);

  /* ─── Color · Dark theme (use via [data-theme="dark"]) ─ */
  --color-bg-dark:           #1A1817;
  --color-surface-dark:      #242121;
  --color-surface-2-dark:    #3B3835;
  --color-border-dark:       #383838;
  --color-border-strong-dark:#292929;
  --color-text-dark:         #FEFEFE;
  --color-text-2-dark:       #F5F5F4;
  --color-text-3-dark:       #C7C7C7;
  --color-text-4-dark:       #757575;

  /* ─── Typography ──────────────────────────────────── */
  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Type scale — calibrated against Figma usage. Sans is the workhorse;
     serif is reserved for hero, section headers and quotes. */
  --text-display: 400 40px/1.1   var(--font-display);
  --text-h1:      600 24px/1.25  var(--font-sans);
  --text-h2:      600 20px/1.3   var(--font-sans);
  --text-h3:      600 18px/1.4   var(--font-sans);
  --text-h4:      600 16px/1.5   var(--font-sans);
  --text-body-lg: 400 18px/1.55  var(--font-sans);
  --text-body:    400 16px/1.55  var(--font-sans);
  --text-body-sm: 400 14px/1.5   var(--font-sans);
  --text-label:   500 14px/1.4   var(--font-sans);
  --text-caption: 400 12px/1.45  var(--font-sans);
  --text-overline:600 10px/1.4   var(--font-sans);
  --text-mono:    400 13px/1.5   var(--font-mono);
  --text-quote:   400 18px/1.5  var(--font-display);

  /* Back-compat shims (kept while pages migrate) */
  --text-3xl:  var(--text-display);
  --text-2xl:  600 22px/1.3 var(--font-sans);
  --text-xl:   var(--text-h2);
  --text-lg:   var(--text-body-lg);
  --text-md:   var(--text-h4);
  --text-base: var(--text-body);
  --text-sm:   var(--text-body-sm);
  --text-xs:   var(--text-overline);

  /* ─── Spacing — 4px base, 8px rhythm ──────────────── */
  --space-2xs:  2px;
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;
  --space-4xl:  96px;

  /* ─── Shape ──────────────────────────────────────── */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ─── Elevation — borders, not shadows ────────────── */
  --shadow-sm:  0 1px 2px rgba(17, 17, 25, 0.04);
  --shadow-md:  0 4px 12px rgba(17, 17, 25, 0.06);

  /* ─── Motion ──────────────────────────────────────── */
  --duration-micro:  100ms;
  --duration-short:  200ms;
  --duration-medium: 300ms;
  --duration-long:   500ms;
  --easing-enter:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --easing-exit:     cubic-bezier(0.4, 0.0, 1, 1);
  --easing-move:     cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Page scaffolding used across the design-system pages */
.ds-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-xl) var(--space-3xl);
}
.ds-overline {
  font: var(--text-overline);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-3);
  margin: 0 0 var(--space-sm);
}
.ds-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-sm);
}
.ds-h2 {
  font: var(--text-h2);
  margin: var(--space-2xl) 0 var(--space-md);
  letter-spacing: -0.005em;
}
.ds-lede {
  font: var(--text-body-lg);
  color: var(--color-text-2);
  max-width: 62ch;
  margin: 0 0 var(--space-2xl);
}
.ds-p  { font: var(--text-body); color: var(--color-text-2); max-width: 62ch; }

.ds-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.ds-rule {
  height: 1px; background: var(--color-border); border: 0;
  margin: var(--space-2xl) 0;
}