/* TaxLex Design System — canonical tokens.
   Mirrors the :root block from api/static/index.html and admin.html
   (CMO Deliverable 3 §1, 2026-05-09). */

/* Self-hosted fonts (no Google Fonts network call — CSP blocks external
   font-src/@import). Same variable-font woff2 files used by cv/cv.css
   (each is a true variable font whose weight axis covers the values
   declared below), Latin subset only. Weight coverage matches the
   family/weight set the previous @import requested. */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/playfair-display-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/playfair-display-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/playfair-display-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/dm-sans-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-sans-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/dm-sans-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/dm-sans-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
}

:root {
  /* ── Brand ─────────────────────────────────────────────── */
  --brand-primary:    #1a4a3a;   /* deep forest green */
  --brand-primary-dk: #163d30;
  --brand-secondary:  #2d6b55;
  --brand-gold:       #b8963e;
  --brand-gold-lt:    #faf7f0;

  /* ── Neutrals ──────────────────────────────────────────── */
  --neutral-0:   #ffffff;
  --neutral-50:  #f7f5f0;        /* cream canvas */
  --neutral-100: #f0ede6;
  --neutral-200: #e0ddd8;
  --neutral-300: #9a9690;
  --neutral-500: #5a5751;
  --neutral-900: #1a1916;        /* near-black sidebar */

  /* ── Semantic aliases ──────────────────────────────────── */
  --bg:        var(--neutral-50);
  --surface:   var(--neutral-0);
  --surface-2: var(--neutral-100);
  --sidebar:   var(--neutral-900);
  --border:    rgba(0, 0, 0, 0.08);
  --border-2:  rgba(0, 0, 0, 0.14);
  --text:      var(--neutral-900);
  --text-2:    var(--neutral-500);
  --text-3:    var(--neutral-300);
  --accent:    var(--brand-primary);
  --accent-2:  var(--brand-secondary);
  --accent-lt: #e8f2ee;
  --tag-bg:    #edf4f0;
  --tag-text:  var(--brand-primary);

  /* ── Accent — teal wave system ────────────────────────── */
  --accent-teal:     #2a9d8f;   /* wave stroke primary */
  --accent-teal-lt:  #4abcb0;   /* wave stroke variant (lighter) */
  --accent-sparkle:  #5fd4ca;   /* sparkle dots at 15–25% opacity */

  /* ── Status ────────────────────────────────────────────── */
  --status-ok:      #1a6640;
  --status-ok-bg:   #e8f7f0;
  --status-warn:    #92620a;
  --status-warn-bg: #fef3e2;
  --status-err:     #c0392b;
  --status-err-bg:  #fdecea;

  /* ── Typography ────────────────────────────────────────── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Semantic type tokens */
  --type-h1-size:     32px;
  --type-h1-weight:   500;
  --type-h1-lh:       1.2;
  --type-h1-tracking: -0.01em;

  --type-h2-size:     22px;
  --type-h2-weight:   500;
  --type-h2-lh:       1.3;

  --type-h3-size:     16px;
  --type-h3-weight:   500;
  --type-h3-lh:       1.35;

  --type-body-size:   15px;
  --type-body-lh:     1.6;

  --type-small-size:  13px;
  --type-small-lh:    1.55;

  --type-tiny-size:   11px;
  --type-tiny-lh:     1.4;

  --type-eyebrow-size:    10px;
  --type-eyebrow-tracking: 0.08em;

  --type-code-size:   12px;

  /* ── Spacing scale (4-px base) ─────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* ── Radius ────────────────────────────────────────────── */
  --radius:      10px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* Asymmetric bubble radii — TaxLex signature */
  --radius-q-bubble: 14px 14px 3px 14px;
  --radius-a-bubble: 3px 14px 14px 14px;

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow:    0 2px 16px rgba(0, 0, 0, 0.07);
  --shadow-sm: 0 1px 3px  rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 16px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.30);

  /* ── Motion ────────────────────────────────────────────── */
  --motion-fast:   0.12s ease;
  --motion-base:   0.18s ease;
  --motion-layout: 0.22s ease;
  --motion-pane:   0.28s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ────────────────────────────────────────────── */
  --sidebar-w:     240px;
  --max-content-w: 780px;
  --pane-w:        520px;
}

/* ── Element defaults ───────────────────────────────────── */
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  line-height: var(--type-h1-lh);
  letter-spacing: var(--type-h1-tracking);
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-lh);
}
h3, .h3 {
  font-family: var(--font-body);
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  line-height: var(--type-h3-lh);
}
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--type-eyebrow-size);
  text-transform: uppercase;
  letter-spacing: var(--type-eyebrow-tracking);
  font-weight: 500;
  color: var(--text-3);
}
.small  { font-size: var(--type-small-size); line-height: var(--type-small-lh); color: var(--text-2); }
.tiny   { font-size: var(--type-tiny-size);  line-height: var(--type-tiny-lh);  color: var(--text-3); }
code, .mono, .citation-code {
  font-family: var(--font-mono);
  font-size: var(--type-code-size);
}