/* Sourdough, design tokens. Source of truth: design/design_system.md.
   Figma + automated sync deferred until v2.1. */

/* Two self-hosted faces, woff2 only. SIL OFL.
   See design_execution_v1.md §P0.2 and design_system.md brand invariants. */

@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-024F, U+2010-2027, U+2030-2052, U+20A0-20BF;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-024F, U+2010-2027, U+2030-2052, U+20A0-20BF;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-024F, U+2010-2027, U+2030-2052, U+20A0-20BF;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-024F, U+2010-2027, U+2030-2052, U+20A0-20BF;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-024F, U+2010-2027, U+2030-2052, U+20A0-20BF;
}

/* Berkeley Mono, primary UI face per the v0 brief argument that it is the
   most expressive choice in the system. Trial license is in use; do not
   promote to a public marketing campaign without a commercial license. */
@font-face {
  font-family: 'Berkeley Mono';
  src: url('/fonts/BerkeleyMonoTrial-Regular.otf') format('opentype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-024F, U+2010-2027, U+2030-2052, U+20A0-20BF;
}

:root {
  /* --- Color (Federal Document palette, May 2026) ---
     The thesis: a tax product should read as a Treasury bond, not as a
     warm AI startup. Paper is cool ivory (manila), ink is cool near-black,
     no brown undertone. One workhorse accent, federal blue, does
     everything: buttons, borders, links, hovers, shadows, focus.
     Treasury red is a stamp: appears only on the scoreboard numbers, the
     wordmark dot, and <mark> highlights. Two colors, two roles. */
  --paper:         #FBFBFA;   /* eggshell near-white, premium-paper feel */
  --paper-edge:    #E8E8E2;   /* hairline separator */
  --paper-tint:    #F0F0EC;   /* elevated surface, slightly warmer for tinted blocks */
  --ink:           #0E1014;   /* cool near-black, no brown */
  --ink-soft:      #2A2D33;
  --warm:          #4A4D53;   /* cool muted, was warm gray-brown */
  --mute:          #6B6E76;
  --federal:       #1B3A6B;   /* deep federal blue, the workhorse accent */
  --federal-deep:  #122A4D;
  --federal-tint:  #D9DFE9;   /* focus ring, panel tint */
  --flag:          #B22234;   /* treasury red, numbers, dot, mark only */
  --flag-tint:     #F1D6D9;
  --selection:     #C9D3E5;
  --ink-cite:      #0E1F3A;   /* IRC §, Schedule C refs, code, anything cited */

  /* Aliases kept for compatibility during migration. New code should use the
     federal/flag names directly. */
  --terra:        var(--federal);
  --terra-deep:   var(--federal-deep);
  --terra-tint:   var(--federal-tint);
  --terra-soft:   rgba(27, 58, 107, 0.35);

  /* --- Type --- */
  --serif: 'Source Serif 4', 'Iowan Old Style', Charter, 'Sitka Text', Cambria, Georgia, serif;
  --mono:  'Berkeley Mono', 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale, four sizes, no exceptions.
     Hero: h1, success-card glyphs, any "shout" type.
     Lede: h2, brand wordmark, secondary headings, large emphasis text.
     Body: paragraphs, default reading text, mono body, scoreboard values.
     UI:   mono caps, labels, badges, metadata, micro disclaimers. */
  --fs-hero: 32px;
  --fs-lede: 22px;
  --fs-body: 17px;
  --fs-ui:   12px;

  --lh-body:  1.65;
  --lh-lede:  1.5;
  --lh-hero:  1.15;

  /* --- Spacing (8px grid) --- */
  --s0: 4px;
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 72px;
  --s7: 104px;

  /* --- Borders + shadows (hard rectangles only) ---
     Shadows are federal-deep, not ink. Solid navy shadow on ivory paper is
     the visual idiom of every Treasury form ever printed. */
  --bd:          1.5px solid var(--ink);
  --bd-soft:     1px solid var(--paper-edge);
  --bd-mute:     1px solid var(--mute);
  --shadow-hard: 4px 4px 0 var(--federal-deep);
  --shadow-soft: 2px 2px 0 var(--federal-deep);
  --shadow-live: 6px 6px 0 var(--flag);  /* reserved for the single primary CTA on a page */

  /* --- Motion (sub-100ms, compositor-friendly properties only) --- */
  --dur:  80ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* --- Layout --- */
  --content-max: 640px;
  --gutter:      24px;
}

@media (min-width: 640px) {
  :root {
    --fs-hero: 44px;
    --fs-body: 18px;
    --gutter:  40px;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   SOU-203 — Sticker-Punk brand language (May 2026, primary brand).

   The Treasury Bond palette + Source Serif 4 above stays loaded as the
   default theme for documentation surfaces (engine demo, tips index, the
   per-tip pages, accountants landing as of writing). The Sticker-Punk
   language is the new primary brand and is applied per-surface via
   `<body class="theme-sticker">`.

   Why dual-theme instead of a hard switch: the engine demo's per-line
   IRC citation rendering reads correctly in serif + Treasury palette
   (it's a documentation surface, not a brand surface). Forcing every
   page to the new sticker tokens at once would also retheme those
   pages, which is out of scope for SOU-203. When the founder rules on
   each remaining surface (demo, tips, accountants), removing `theme-
   sticker` from <body> reverts that page; adding it migrates it.

   New tokens introduced by this theme:
   --slime, --highlight, --display, --body, --display-fs-hero are *new
   names* and exist only inside the .theme-sticker scope. Existing
   --paper, --ink, --mono, --serif, etc. get overridden inside the scope
   so existing CSS that consumes those names will pick up the new
   values automatically on sticker pages.

   Source: web/redesigns/sticker-punk/index.html design tokens.
   ────────────────────────────────────────────────────────────────────────── */

body.theme-sticker {
  /* Palette */
  --paper:         #FFFFFF;
  --paper-edge:    #BDBDBD;
  --paper-tint:    #F5F5F5;
  --ink:           #0A0A0A;
  --ink-soft:      #2A2A2A;
  --warm:          #4A4A4A;
  --mute:          #6B6E76;
  --slime:         #B6FF1A;          /* primary accent — replaces --federal */
  --slime-deep:    #9CE319;
  --highlight:     #FFFF59;          /* secondary accent / mark swatch */
  --highlight-deep:#EFE03A;
  --gray-faint:    #BDBDBD;
  --gray-line:     #1A1A1A;
  /* Aliases so existing CSS consuming the legacy names paints in sticker
     colors on sticker pages without re-authoring every selector. */
  --federal:       var(--slime);
  --federal-deep:  var(--slime-deep);
  --federal-tint:  rgba(182, 255, 26, 0.22);
  --flag:          var(--highlight);
  --flag-tint:     rgba(255, 255, 89, 0.42);
  --selection:     rgba(182, 255, 26, 0.42);
  --ink-cite:      #0A0A0A;

  /* Type. Impact display stack with deep fallback; Helvetica Neue body;
     SF Mono code. Source Serif 4 is retired from sticker surfaces. */
  --display: Impact, 'Haettenschweiler', 'Arial Narrow Bold', 'Helvetica Neue Condensed Bold', 'Arial Black', sans-serif;
  --body:    'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono:    'SF Mono', Menlo, Consolas, ui-monospace, monospace;
  /* Alias so existing `font-family: var(--serif)` consumers render in
     the sticker body font on sticker pages. */
  --serif:   var(--body);

  /* Type scale — slightly different on sticker because the display font
     reads bigger; same body/lede/ui scale. */
  --fs-hero: 56px;        /* was 32; sticker headlines are display-display */
  --fs-lede: 22px;
  --fs-body: 17px;
  --fs-ui:   12px;

  /* Border + shadow vocabulary: 2.5px ink borders, slime offset shadows. */
  --bd:          2.5px solid var(--ink);
  --bd-soft:     2px solid var(--paper-edge);
  --bd-mute:     1.5px solid var(--mute);
  --shadow-hard: 6px 6px 0 var(--slime);
  --shadow-soft: 3px 3px 0 var(--slime);
  --shadow-live: 6px 6px 0 var(--highlight);
}

@media (min-width: 640px) {
  body.theme-sticker {
    --fs-hero: 88px;     /* large viewports get a bigger display headline */
    --fs-body: 18px;
  }
}