/* ============================================================
   3Powers — design tokens
   Single source of truth for colour, type, spacing and radii.
   Do not hard-code values elsewhere; add a token here instead.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&family=Public+Sans:wght@400;500;600;700&display=swap");

:root {
  /* ---- base palette ---- */
  --cream: #efebe2;
  --paper: #fcfbf8;
  --paper-warm: #f6f2e8;
  --ink: #211c16;
  --ink-soft: #3a332c;
  --ink-muted: #6e655a;
  --line: #e1d9c5;

  --gold: #9c7a2e;
  --gold-bright: #b98e4c;
  --slate: #4d5159;
  --oxblood: #7b1818;

  --code-bg: #2b2620;
  --code-border: #4a4540;
  --code-text: #ece7dd;

  /* ---- semantic aliases ---- */
  --surface-page: var(--cream);
  --surface-card: var(--paper);
  --surface-card-warm: var(--paper-warm);
  --surface-ink: var(--ink);

  --text-primary: var(--ink);
  --text-secondary: var(--ink-soft);
  --text-muted: var(--ink-muted);
  --text-on-ink: var(--paper);
  --text-on-ink-muted: #b8b0a3;
  --text-link: var(--gold);

  --border-default: var(--line);
  --border-ink: var(--ink);

  /* the three branches — an accent triad, used as colour-coding only */
  --brand-legislative: var(--gold);
  --brand-executive: var(--slate);
  --brand-judiciary: var(--oxblood);

  /* ---- terminal palette — matched to the engine's real output
         (docs/assets/3powers-run-demo.gen.py) ---- */
  --term-bg: #23272f;
  --term-chrome: #2b3038;
  --term-edge: #353b45;
  --term-txt: #dfe3e8;
  --term-dim: #7f8899;
  --term-cyan: #5ccfe6;
  --term-green: #7ec87e;
  --term-red: #e5686f;
  --term-amber: #e6b450;
  --term-magenta: #c792ea;
  --term-idle: #3a414c;

  /* ---- type ---- */
  --font-serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-hero: clamp(2.4rem, 5.2vw, 4rem);
  --text-section-title: clamp(1.6rem, 3.4vw, 2.3rem);
  --text-lead: 1.12rem;
  --text-pullquote: 1.12rem;
  --text-h3: 1.15rem;
  --text-body: 0.97rem;
  --text-small: 0.9rem;
  --text-label: 0.85rem;
  --text-nav: 0.82rem;
  --text-footer: 0.82rem;
  --text-badge: 0.7rem;
  --text-eyebrow: 0.76rem;
  --text-kicker: 0.72rem;
  --text-meta: 0.72rem;
  --text-brand: 1.3rem;

  --leading-body: 1.65;
  --leading-lead: 1.7;
  --leading-hero: 1.14;

  --tracking-tight: -0.01em;
  --tracking-nav: 0.02em;
  --tracking-eyebrow: 0.22em;
  --tracking-kicker: 0.2em;
  --tracking-badge: 0.16em;

  /* ---- spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 14px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 28px;
  --space-9: 30px;
  --space-10: 36px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-22: 88px;
  --space-26: 104px;

  /* ---- radii — the system is nearly square-cornered ---- */
  --radius-sharp: 2px;
  --radius-default: 4px;
  --radius-pill: 999px;

  /* ---- layout ---- */
  --maxw-content: 1120px;
  --container-padding: 24px;
  --header-height: 64px;
}