/* =========================================================================
   Cold Anvil Studios — Colors & Type Tokens
   Palette: Bullfinch Forge (Gruvbox Bullfinch core + curated extensions)
   Type:    Newsreader (editorial serif) + Inter (utility sans)

   Ported from Design_Handoffs/marketing-site/tokens.css (2026-04-24, COL-72).
   Port deltas versus the handoff source:
     1. Google Fonts @import trimmed to JetBrains Mono only. The handoff
        shipped IBM Plex Sans/Serif + Source Serif 4 + Fraunces for the
        canvas-era Type A/C scaffolding; pair B (Newsreader + Inter) is
        locked (DECISIONS.md #006) and self-hosted from /fonts/.
     2. Font paths rewritten ./fonts/ -> ../fonts/ (css/ lives sibling to fonts/).
     3. Dead --font-display-a/c + --font-body-a/c variables and
        .wk-type-a / .wk-type-c switcher classes removed; with their
        imports stripped they would fall back to Georgia/system, worse
        than removing. .wk-type-b kept (redundant with defaults, but
        makes artboards ported verbatim still behave).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/Newsreader_opsz_wght_.ttf') format('truetype-variations'),
       url('../fonts/Newsreader_opsz_wght_.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/Newsreader-Italic_opsz_wght_.ttf') format('truetype-variations'),
       url('../fonts/Newsreader-Italic_opsz_wght_.ttf') format('truetype');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/InterVariable.ttf') format('truetype-variations'),
       url('../fonts/InterVariable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/InterVariable-Italic.ttf') format('truetype-variations'),
       url('../fonts/InterVariable-Italic.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- BASE COLOR SCALE (raw hex) ---------- */
  --ca-bg0s:        #32302f; /* Gruvbox bg0_s — page background (Bullfinch core) */
  --ca-bg1:         #3c3836; /* Gruvbox bg1 — secondary surface */
  --ca-bg2:         #4b4441; /* Lifted elevation (Bullfinch extension) */
  --ca-bg3:         #504945; /* Gruvbox bg2 — card surface (legacy) */
  --ca-bg4:         #665c54; /* Gruvbox bg3 — strong lift */
  --ca-bg5:         #7c6f64; /* Gruvbox bg4 — heaviest lift */

  --ca-gray:        #928374; /* Gruvbox gray-245 — borders, muted text */
  --ca-gray-light:  #a89984; /* Gruvbox gray-246 — secondary text */

  --ca-fg0:         #fbf1c7; /* Gruvbox fg0 — cream (contrast pocket) */
  --ca-fg1:         #ebdbb2; /* Gruvbox fg1 — bright text */
  --ca-fg2:         #d5c4a1; /* Gruvbox fg2 — supporting text */
  --ca-ink:         #d4be9a; /* Bullfinch core body ink */

  --ca-mustard:     #d8a65c; /* Bullfinch accent — CTAs, manifesto */
  --ca-olive:       #8c945c; /* Secondary — non-text UI only */
  --ca-red:         #fb4934; /* Error (Gruvbox bright red) */
  --ca-green:       #b8bb26; /* Success (Gruvbox bright green) */
  --ca-yellow:      #fabd2f; /* Warning (Gruvbox bright yellow) */

  /* ---------- SEMANTIC COLOR TOKENS ---------- */
  --bg:             var(--ca-bg0s);
  --bg-elevated:    var(--ca-bg2);
  --bg-surface:     var(--ca-bg1);

  --ink:            var(--ca-ink);           /* body on page bg — 7.27:1 AAA */
  --ink-bright:     var(--ca-fg1);           /* body on lifted surfaces — 9.57:1 AAA */
  --ink-muted:      var(--ca-gray-light);    /* captions, secondary */
  --ink-dim:        var(--ca-gray);          /* tertiary, dividers text */
  --ink-on-light:   var(--ca-bg0s);          /* body on cream / mustard */

  --accent:         var(--ca-mustard);       /* primary accent — 5.96:1 */
  --accent-on:      var(--ca-bg0s);          /* text on accent */
  --secondary:      var(--ca-olive);         /* non-text ui (dots, badges) */

  --border:         var(--ca-gray);          /* visible card border — 3.58:1 */
  --border-subtle:  var(--ca-bg2);           /* internal dividers */

  --cream:          var(--ca-fg0);           /* cream spread pocket */
  --mustard:        var(--ca-mustard);       /* mustard manifesto pocket */

  --status-success: var(--ca-green);
  --status-warn:    var(--ca-yellow);
  --status-error:   var(--ca-red);

  /* ---------- TYPE FACES ---------- */
  --font-serif:     "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:      "JetBrains Mono", Menlo, Consolas, monospace;

  /* Pair-B aliases retained for verbatim artboard/primitive ports.
     (Marketing primitives reference --font-display-b / --font-body-b
     explicitly; the mk-atoms stylesheet reads them via these names.) */
  --font-display-b: var(--font-serif);
  --font-body-b:    var(--font-sans);

  --font-display:        var(--font-display-b);
  --font-body:           var(--font-body-b);
  --font-body-paragraph: var(--font-body-b);

  /* ---------- TYPE SCALE (major-third 1.25, screen-adjusted) ---------- */
  /* Role            size / line-height / weight / face */
  --display-size:    76px;  --display-lh:    1.05;  --display-weight:  500;
  --h1-size:         56px;  --h1-lh:         1.10;  --h1-weight:       500;
  --h2-size:         44px;  --h2-lh:         1.15;  --h2-weight:       500;
  --h3-size:         24px;  --h3-lh:         1.25;  --h3-weight:       500;
  --lead-size:       22px;  --lead-lh:       1.55;  --lead-weight:     400;
  --body-lg-size:    19px;  --body-lg-lh:    1.58;  --body-lg-weight:  400;
  --body-size:       17px;  --body-lh:       1.65;  --body-weight:     400;
  --body-sm-size:    16px;  --body-sm-lh:    1.63;  --body-sm-weight:  400;
  --ui-size:         15px;  --ui-lh:         1.47;  --ui-weight:       500;
  --ui-sm-size:      14px;  --ui-sm-lh:      1.43;  --ui-sm-weight:    500;
  --eyebrow-size:    13px;  --eyebrow-lh:    1.38;  --eyebrow-weight:  500;
  --caption-size:    13px;  --caption-lh:    1.38;  --caption-weight:  400;
  --code-size:       14px;  --code-lh:       1.57;  --code-weight:     400;

  --eyebrow-tracking:  0.14em;

  /* ---------- SPACING (4px base) ---------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  144px;

  /* ---------- RADII ---------- */
  --radius-xs:  3px;
  --radius-sm:  4px;
  --radius-md:  6px;   /* buttons */
  --radius-lg:  8px;   /* cards */
  --radius-xl:  12px;

  /* ---------- BORDERS ---------- */
  --border-width: 1px;
  --border-width-emphasis: 1px; /* accent card — still thin */

  /* ---------- MOTION ---------- */
  --easing:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    280ms;

  /* ---------- FOCUS ---------- */
  --focus-ring:  0 0 0 2px var(--accent);

  /* ---------- LAYOUT ---------- */
  --content-max:  1100px;
  --gutter:       32px;
}

/* =========================================================================
   SEMANTIC TYPE ROLES — apply with class names
   ========================================================================= */

.t-display {
  font-family: var(--font-serif);
  font-size: var(--display-size);
  line-height: var(--display-lh);
  font-weight: var(--display-weight);
  letter-spacing: -0.02em;
}
.t-h1 {
  font-family: var(--font-serif);
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  font-weight: var(--h1-weight);
  letter-spacing: -0.018em;
}
.t-h2 {
  font-family: var(--font-serif);
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  font-weight: var(--h2-weight);
  letter-spacing: -0.015em;
}
.t-h3 {
  font-family: var(--font-serif);
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
  font-weight: var(--h3-weight);
  letter-spacing: -0.008em;
}
.t-lead {
  font-family: var(--font-serif);
  font-size: var(--lead-size);
  line-height: var(--lead-lh);
  font-weight: var(--lead-weight);
}
.t-body-lg {
  font-family: var(--font-serif);
  font-size: var(--body-lg-size);
  line-height: var(--body-lg-lh);
}
.t-body {
  font-family: var(--font-serif);
  font-size: var(--body-size);
  line-height: var(--body-lh);
}
.t-body-sm {
  font-family: var(--font-serif);
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-lh);
}
.t-ui {
  font-family: var(--font-sans);
  font-size: var(--ui-size);
  line-height: var(--ui-lh);
  font-weight: var(--ui-weight);
}
.t-ui-sm {
  font-family: var(--font-sans);
  font-size: var(--ui-sm-size);
  line-height: var(--ui-sm-lh);
  font-weight: var(--ui-sm-weight);
}
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--eyebrow-size);
  line-height: var(--eyebrow-lh);
  font-weight: var(--eyebrow-weight);
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-tracking);
  color: var(--ink-muted);
}
.t-caption {
  font-family: var(--font-sans);
  font-size: var(--caption-size);
  line-height: var(--caption-lh);
  color: var(--ink-muted);
}
.t-code {
  font-family: var(--font-mono);
  font-size: var(--code-size);
  line-height: var(--code-lh);
}

/* =========================================================================
   BASE ELEMENT DEFAULTS (opt-in: apply .ca-base to the root)
   ========================================================================= */

.ca-base {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  -webkit-font-smoothing: antialiased;
}
.ca-base h1 { font: var(--h1-weight) var(--h1-size)/var(--h1-lh) var(--font-serif); letter-spacing: -0.018em; }
.ca-base h2 { font: var(--h2-weight) var(--h2-size)/var(--h2-lh) var(--font-serif); letter-spacing: -0.015em; }
.ca-base h3 { font: var(--h3-weight) var(--h3-size)/var(--h3-lh) var(--font-serif); }
.ca-base p  { font: var(--body-weight) var(--body-size)/var(--body-lh) var(--font-serif); }
.ca-base code,
.ca-base pre { font-family: var(--font-mono); font-size: var(--code-size); }


/* =========================================================================
   WORKSHOP — shared atoms originally from Annie's Workshop handoff.
   Kept under wk-* so marketing sections can reuse them without
   translating identical styles twice.
   ========================================================================= */

:root {
  /* Strike (the signature) */
  --strike-ring: color-mix(in oklab, var(--accent) 40%, transparent);

  /* Ledger lines */
  --ledger-rule: color-mix(in oklab, var(--ca-gray) 40%, transparent);

  /* Callout pockets */
  --pocket-cream-bg: var(--cream);
  --pocket-cream-ink: var(--ca-bg0s);

  /* Live preview chrome tint */
  --preview-chrome: #242221;
}

/* Type switcher — only pair B ships in production. Class kept so
   artboards ported verbatim behave; A and C removed with their fonts. */
.wk-type-b { --font-display: var(--font-display-b); --font-body: var(--font-body-b); --font-body-paragraph: var(--font-body-b); }

/* Workshop atoms */
.wk-root {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body, var(--font-sans));
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -0.005em;
}
.wk-root *::selection { background: var(--accent); color: var(--accent-on); }

.wk-card {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.wk-card--accent { border-color: var(--accent); }
.wk-card--subtle { border-color: var(--border-subtle); }

.wk-display {
  font-family: var(--font-display, var(--font-serif));
  letter-spacing: -0.018em;
  font-weight: 500;
}
.wk-eyebrow {
  font-family: var(--font-body, var(--font-sans));
  font-size: 11px;
  line-height: 1.3;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
}
.wk-tick {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
}
.wk-hairline { height: 1px; background: var(--border-subtle); }
.wk-ruler { height: 1px; background: linear-gradient(to right, transparent, var(--border-subtle) 8%, var(--border-subtle) 92%, transparent); }

/* Buttons */
.wk-btn {
  font-family: var(--font-body, var(--font-sans));
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.003em;
  border-radius: var(--radius-md);
  padding: 10px 16px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink-bright);
  cursor: pointer;
  transition: all var(--dur-base) var(--easing);
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.wk-btn:hover { border-color: var(--ink-muted); color: var(--cream); }
.wk-btn--primary { background: var(--accent); color: var(--accent-on); border-color: var(--accent); }
.wk-btn--primary:hover { filter: brightness(1.05); }
.wk-btn--ghost { border-color: transparent; color: var(--ink-muted); padding: 8px 10px; }
.wk-btn--ghost:hover { color: var(--cream); background: var(--bg-surface); }
.wk-btn--sm { padding: 6px 10px; font-size: 13px; }

/* Annie voice line */
.wk-annie-line {
  display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start;
}
.wk-annie-mark {
  width: 24px; height: 24px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--accent);
  font-family: var(--font-display, var(--font-serif));
  font-style: italic;
  font-size: 14px;
  line-height: 1;
  margin-top: 2px;
  font-weight: 500;
}
.wk-annie-body { font-family: var(--font-body-paragraph, var(--font-body)); color: var(--ink-bright); font-size: 16px; line-height: 1.62; }
.wk-annie-body em { color: var(--cream); font-style: italic; font-weight: 500; }

/* User line */
.wk-user-line {
  padding: 14px 18px;
  border-left: 2px solid var(--ink-dim);
  color: var(--ink);
  background: transparent;
  font-family: var(--font-body-paragraph, var(--font-body));
  font-size: 16px; line-height: 1.58;
}
.wk-user-line::before {
  content: "you";
  display: block;
  font-family: var(--font-body, var(--font-sans));
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 4px;
  font-weight: 500;
}

/* Input field */
.wk-input {
  font-family: var(--font-body-paragraph, var(--font-body));
  font-size: 16px; line-height: 1.5;
  background: transparent;
  color: var(--ink-bright);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  width: 100%;
  transition: border-color var(--dur-base) var(--easing);
  resize: vertical;
}
.wk-input::placeholder { color: var(--ink-dim); }
.wk-input:focus { outline: none; border-color: var(--accent); }

/* Plan card — the signature */
.wk-struck {
  position: relative;
  padding: 26px 28px 24px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--cream);
  color: var(--pocket-cream-ink);
  overflow: hidden;
}
.wk-struck--pending { background: transparent; color: var(--ink-bright); border-style: dashed; border-color: var(--ink-muted); }
.wk-struck__eyebrow {
  font-family: var(--font-body, var(--font-sans));
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ca-bg3);
  margin-bottom: 12px;
  font-weight: 600;
}
.wk-struck--pending .wk-struck__eyebrow { color: var(--ink-muted); }
.wk-struck__sentence {
  font-family: var(--font-display, var(--font-serif));
  font-size: 26px;
  line-height: 1.35;
  letter-spacing: -0.012em;
  font-weight: 400;
  color: inherit;
}
.wk-struck__sentence em {
  font-style: italic;
  color: inherit;
}
.wk-struck__stamp {
  position: absolute;
  right: 22px;
  bottom: 18px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ca-bg3);
  opacity: 0.55;
  text-transform: uppercase;
}

/* Chip (status, tags) */
.wk-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px;
  padding: 0 9px;
  border-radius: 11px;
  border: 1px solid var(--border-subtle);
  font-family: var(--font-body, var(--font-sans));
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  background: transparent;
}
.wk-chip--accent { border-color: var(--accent); color: var(--accent); }
.wk-chip--live { border-color: var(--secondary); color: var(--secondary); }
.wk-chip__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* "Point at it" underline (for challengeable claims) */
.wk-claim {
  background-image: linear-gradient(to top, color-mix(in oklab, var(--accent) 40%, transparent) 0, color-mix(in oklab, var(--accent) 40%, transparent) 6px, transparent 6px);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 100%;
  padding: 1px 3px;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--easing);
}
.wk-claim:hover {
  background-image: linear-gradient(to top, color-mix(in oklab, var(--accent) 15%, transparent) 0, color-mix(in oklab, var(--accent) 15%, transparent) 100%);
}
.wk-claim--hot {
  background-image: linear-gradient(to top, color-mix(in oklab, var(--accent) 25%, transparent) 0, color-mix(in oklab, var(--accent) 25%, transparent) 100%);
}

/* Browser chrome for the live preview */
.wk-browser {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--preview-chrome);
}
.wk-browser__bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-subtle);
  background: #2a2826;
}
.wk-browser__dots { display: flex; gap: 6px; }
.wk-browser__dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--ca-bg4); }
.wk-browser__url {
  font-family: var(--font-mono);
  font-size: 11px;
  background: #1f1d1c;
  border-radius: 4px;
  padding: 5px 10px;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0;
}
.wk-browser__url .wk-browser__live {
  color: var(--secondary);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--secondary);
  padding: 0 5px;
  border-radius: 2px;
  height: 14px;
  display: inline-flex; align-items: center;
}
.wk-browser__canvas { background: #fff; position: relative; }

/* Typewriter cursor */
.wk-caret {
  display: inline-block; width: 2px; height: 1em; vertical-align: text-bottom;
  background: var(--accent); margin-left: 2px;
  animation: wkCaret 1s steps(2) infinite;
}
@keyframes wkCaret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* Soft texture for cream pockets (subtle paper) */
.wk-paper {
  background-color: var(--cream);
  background-image:
    radial-gradient(at 20% 20%, color-mix(in oklab, var(--ca-bg3) 4%, transparent), transparent 40%),
    radial-gradient(at 80% 80%, color-mix(in oklab, var(--ca-bg3) 3%, transparent), transparent 45%);
}

/* Ledger (project history) */
.wk-ledger {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 0 22px;
  font-family: var(--font-body, var(--font-sans));
  font-size: 13px;
  line-height: 1.55;
}
.wk-ledger__date {
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding-top: 2px;
  border-right: 1px solid var(--ledger-rule);
  padding-right: 22px;
  text-align: right;
}
.wk-ledger__entry {
  padding-bottom: 14px;
  color: var(--ink-bright);
}
.wk-ledger__entry--struck {
  color: var(--cream);
}
.wk-ledger__entry--op {
  color: var(--ink);
  font-style: italic;
}