/* =============================================================
   Breakeven — Design Tokens
   v9 · Forest — forest green on white · "a studio"
   2026-05-29 · replaces v0.8 (oxblood + cream + ink)
   -------------------------------------------------------------
   Changes from v0.8:
   • Palette flipped: warm cream paper → white paper; oxblood
     accent → forest green. The brand colour is now forest.
   • --negative is its own hue (#9B2D3A) — no longer aliased to
     the brand accent. Brand = forest, negative = red ink.
   • New canonical font slots: --display (Hanken Grotesk),
     --wordmark (Cormorant Garamond), --serif (Newsreader),
     --sans (DM Sans), --mono (JetBrains Mono).
   • Headings now render in --display (Hanken Grotesk) via the
     legacy --font-serif-display slot. Body stays Newsreader.
   • Legacy variable names (--accent, --paper-bright, --font-*,
     --chart-*, ink/paper/rule ramps) are preserved and mapped
     onto the new palette so existing components keep working.
   ============================================================= */

:root {
  /* ── FOREST (v9 canonical primary palette) ─────────────────── */
  --forest:        #1E6B4A;
  --forest-bright: #2DA06B;
  --forest-deep:   #143D2E;
  --forest-wash:   #E9F2EC;

  /* ── INK ───────────────────────────────────────────────────── */
  --ink:           #1E1B16;
  --ink-deep:      #0E0C09;   /* darkest — CTA hover/pressed */
  --ink-soft:      #4B463E;
  --ink-mid:       #6B655B;   /* between soft and muted */
  --ink-warm:      #1E1B16;

  /* ── PAPER / SURFACES (white-led) ──────────────────────────── */
  --paper:         #FFFFFF;
  --paper-warm:    #FBF7F0;
  --paper-bright:  var(--paper-warm);   /* legacy alias */
  --paper-pure:    #FFFFFF;
  --bone:          #EFE8DA;   /* deepest warm surface (derived) */

  /* ── RULES ─────────────────────────────────────────────────── */
  --rule:          #ECE7DD;
  --rule-soft:     #F3EFE7;
  --rule-strong:   #D9D2C4;   /* darker rule for ornaments (derived) */
  --muted:         #8C857A;
  --muted-soft:    #A8A096;   /* (derived) */

  /* ── ON DARK ───────────────────────────────────────────────── */
  --charcoal:         #221E18;
  --on-dark:          #F6F1E8;
  --paper-on-dark:    var(--on-dark);   /* legacy alias */
  --muted-on-dark:    #B3AB9C;          /* (derived) */
  --rule-on-dark:     #3A352C;          /* (derived) */

  /* ── ACCENT — FOREST ───────────────────────────────────────────
     Forest is the brand colour. Unlike v0.8 oxblood it may lead a
     chart series and mark interactive elements, but stays off large
     surface fills — white carries the surfaces. */
  --accent:         var(--forest);       /* legacy alias → forest */
  --accent-deep:    var(--forest-deep);  /* link hover / pressed */
  --accent-pale:    #A7CBB8;             /* pale forest on dark (derived) */
  --accent-wash:    var(--forest-wash);  /* very pale BG — sparingly */

  /* ── BUTTONS (primary CTAs) — ink on white ─────────────────── */
  --button-bg:         var(--ink);
  --button-fg:         var(--paper);
  --button-bg-hover:   var(--ink-deep);
  --button-bg-pressed: #000;
  --button-bg-ghost:   transparent;
  --button-fg-ghost:   var(--ink);
  --button-border-ghost: var(--ink);

  /* Secondary brand color — softer for charts only */
  --indigo:         #1F3050;

  /* ── SEMANTIC ──────────────────────────────────────────────────
     Negative is its own red hue now — brand (forest) and negative
     (red) are deliberately different. */
  --positive:       #2E7D5B;
  --negative:       #9B2D3A;
  --warning:        #8C857A;

  /* ── CHART PALETTE — forest-led ────────────────────────────────
     Forest marks the headline series; other voices stay neutral. */
  --chart-1: var(--forest);    /* forest — headline series / attention */
  --chart-2: var(--ink);       /* ink — primary categorical */
  --chart-3: #E8B23A;          /* mustard — secondary voice */
  --chart-4: #1F3050;          /* indigo — tertiary */
  --chart-5: var(--positive);  /* green — positives */
  --chart-6: #C2547F;          /* rose — quaternary */
  --chart-7: var(--muted);     /* warm grey — neutral */
  --chart-8: var(--rule);      /* rule — gridlines */

  /* ── TYPOGRAPHY ────────────────────────────────────────────────
     New canonical slots + preserved legacy --font-* aliases.
     The WORDMARK ships as a frozen SVG outline in production; the
     live-text slot exists for fallback/system surfaces. */
  --display:   'Hanken Grotesk', system-ui, sans-serif;
  --wordmark:  'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --serif:     'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:      'DM Sans', system-ui, sans-serif;
  --mono:      'JetBrains Mono', ui-monospace, monospace;

  /* legacy font slots → mapped onto the new faces */
  --font-display:      var(--display);
  --font-wordmark:     var(--wordmark);
  --font-serif:        var(--serif);
  --font-serif-display:var(--display);   /* headings now Hanken Grotesk */
  --font-sans:         var(--sans);
  --font-mono:         var(--mono);

  /* Type scale */
  --t-mega:    clamp(2.6rem, 6vw, 4.6rem);
  --t-display: clamp(2rem, 4.5vw, 3.4rem);
  --t-h1:      clamp(1.7rem, 3vw, 2.3rem);
  --t-h2:      clamp(1.3rem, 2vw, 1.6rem);
  --t-h3:      1.15rem;
  --t-lede:    1.15rem;
  --t-body:    1rem;
  --t-editorial: 1.1rem;
  --t-sm:      0.875rem;
  --t-xs:      0.78rem;
  --t-2xs:     0.7rem;

  --lh-tight:  1.08;
  --lh-snug:   1.22;
  --lh-body:   1.6;
  --lh-reading: 1.7;

  /* ── SPACING ───────────────────────────────────────────────── */
  --space-2xs:  4px;
  --space-xs:   8px;
  --space-sm:   12px;
  --space-md:   20px;
  --space-lg:   32px;
  --space-xl:   56px;
  --space-2xl:  96px;
  --space-3xl:  140px;

  /* ── LAYOUT ────────────────────────────────────────────────── */
  --width-content:    720px;
  --width-dashboard:  1040px;
  --width-marketing:  1240px;
  --gutter:           clamp(20px, 4vw, 56px);
  --margin-col:       clamp(0px, 18vw, 220px);

  /* ── BORDERS / RADII ───────────────────────────────────────── */
  --radius-0: 0;
  --radius-sm: 1px;

  --shadow-card: 0 1px 0 rgba(30, 27, 22, 0.05);

  /* ── MOTION ────────────────────────────────────────────────── */
  --t-fast:  120ms ease;
  --t-base:  180ms ease;
  --t-slow:  400ms cubic-bezier(.2,.7,.2,1);
}

/* ── RESET ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; }
a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--accent-pale);
}
a:hover { color: var(--accent-deep); text-decoration-color: var(--accent); }

/* ── SURFACES ────────────────────────────────────────────────── */
.surface-ink { background: var(--charcoal); color: var(--paper-on-dark); }
.surface-ink a { color: var(--paper-on-dark); text-decoration-color: var(--rule-on-dark); }
.surface-ink a:hover { color: var(--accent-pale); text-decoration-color: var(--accent-pale); }

.surface-paper { background: var(--paper); color: var(--ink); }
.surface-bright { background: var(--paper-bright); color: var(--ink); }
.surface-bone { background: var(--bone); color: var(--ink); }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--button-bg); color: var(--button-fg);
  padding: 12px 20px;
  font-family: var(--font-sans); font-weight: 500; font-size: 0.92rem;
  border: none; cursor: pointer;
  text-decoration: none;
  transition: background var(--t-base);
}
.btn:hover { background: var(--button-bg-hover); }
.btn:active { background: var(--button-bg-pressed); }
.btn.ghost {
  background: var(--button-bg-ghost); color: var(--button-fg-ghost);
  border: 1px solid var(--button-border-ghost);
}
.btn.ghost:hover { background: var(--ink); color: var(--paper); }

/* Double rule — section close (ledger tradition) */
.double-rule {
  border: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  height: 4px;
  background: transparent;
  margin: 0;
}
.surface-ink .double-rule {
  border-top-color: var(--paper-on-dark);
  border-bottom-color: var(--paper-on-dark);
}