/* ─────────────────────────────────────────────────────────────
   WorkingMemory · Design Tokens
   Scandinavian Zen · Paper & Ink · Light + Dark matched
   ───────────────────────────────────────────────────────────── */


:root {
  /* ── Surfaces · warm paper, one whisper-elevated step ────── */
  --bg-0:   #faf8f3;   /* paper · page base, warm off-white */
  --bg-1:   #f4f1ea;   /* linen · whisper-elevated panel */
  --bg-2:   #ede8dc;   /* parchment · input resting, row hover */
  --bg-3:   #e3dcca;   /* sand · pressed, active row */

  /* ── Ink · deep navy-black for text, never pure #000 ─────── */
  --fg-0:   #1a1f2c;   /* ink · primary text */
  --fg-1:   #525a6b;   /* slate · secondary / label */
  --fg-2:   #8a8f9c;   /* fog · tertiary / metadata */
  --fg-3:   #b8bbc4;   /* stone · placeholder / divider */

  /* ── Strokes · soft dividers, never hard ─────────────────── */
  --line:         rgba(26, 31, 44, 0.08);   /* hairline */
  --line-strong:  rgba(26, 31, 44, 0.14);   /* emphasis */
  --line-focus:   rgba(26, 31, 44, 0.35);   /* focus ring */

  /* ── Accent · olive · single intentional hue ─────────────── */
  --accent:      #366628;       /* olive · CTAs, the tick */
  --accent-ink:  #2c5421;       /* accent pressed */
  --accent-soft: rgba(54, 102, 40, 0.08);  /* accent wash (hover bg) */
  --accent-glow: rgba(54, 102, 40, 0.15);  /* recording halo */

  /* ── Warmth · toffee · editorial italics, hand-touch accents */
  --toffee:      #9D6837;       /* warm brown · em emphasis in prose */
  --toffee-soft: rgba(157, 104, 55, 0.08);  /* founder-avatar / small wash bg */

  /* ── Semantic status · muted, paired with geometry ───────── */
  --ok:     #5c8a6f;   /* sage · done */
  --warn:   #b8762d;   /* amber-clay · blocked / attention */
  --error:  #a84a3e;   /* terracotta · destructive */
  --info:   #4d6a8a;   /* slate-blue · informational */

  /* ── Typography ─────────────────────────────────────────── */
  /* Display serif: Polymath Display — headlines, h1, h2, hero. Mercury-family feel.
     Text serif:    Polymath Text   — body prose, transcript italics, inline em.
     UI sans:       Inter Tight (stand-in for H&Co Gotham) — all UI chrome.
     Mono:          used sparingly for timestamps + structured data. */
  --font-serif-display: "polymath-display", "Mercury Text G1", "Fraunces", "Newsreader", Georgia, serif;
  --font-serif:         "polymath-text",    "Mercury Text G1", "Newsreader", "Source Serif 4", Georgia, serif;
  --font-sans:  "Inter Tight", "Gotham", "Gotham SSm", "Söhne", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  "JetBrains Mono", "Söhne Mono", "Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;     /* body — larger than the techy version */
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  44px;
  --fs-3xl:  64px;

  --lh-tight:  1.12;
  --lh-snug:   1.3;
  --lh-normal: 1.55;
  --lh-loose:  1.75;   /* generous leading for body copy */

  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-caps:   0.12em;   /* wider tracking for small-caps labels */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* ── Spacing · 4px grid, generous defaults ───────────────── */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10:  128px;     /* room to breathe */

  /* ── Radii · gentle rounding ─────────────────────────────── */
  --r-0:    0;
  --r-1:    4px;
  --r-2:    8px;       /* default card radius */
  --r-3:    12px;      /* larger surfaces */
  --r-4:    16px;      /* hero photo wells */
  --r-full: 999px;     /* pills, mic button */

  /* ── Borders ─────────────────────────────────────────────── */
  --bw-hair:    1px;
  --bw-solid:   1px;
  --bw-emphasis:2px;

  /* ── Shadows · extremely restrained, diffuse only ────────── */
  --shadow-none:   none;
  --shadow-whisper:0 1px 2px rgba(26, 31, 44, 0.04);
  --shadow-soft:   0 4px 24px rgba(26, 31, 44, 0.05);
  --shadow-float:  0 12px 48px rgba(26, 31, 44, 0.08);
  --ring-focus:    0 0 0 3px rgba(45, 74, 58, 0.22);
  --ring-record:   0 0 0 6px var(--accent-glow);

  /* ── Motion · slower, softer than the techy system ───────── */
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);    /* gentle · UI default */
  --ease-in-out:cubic-bezier(0.4, 0, 0.2, 1);
  --ease-linear:linear;

  /* ── Z layers ───────────────────────────────────────────── */
  --z-base:   0;
  --z-sticky: 10;
  --z-modal:  50;
  --z-toast:  70;

  /* ── Container widths ───────────────────────────────────── */
  --w-mobile: 420px;
  --w-read:   640px;
  --w-wide:   1120px;
}

/* ─────────────────────────────────────────────────────────────
   Dark mode · matched palette, not inverted
   Dark paper feel — deep ink background, warm off-white text
   ───────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --bg-0:   #1a1f2c;   /* deep ink · page base */
  --bg-1:   #22283a;   /* elevated panel */
  --bg-2:   #2c344a;   /* input resting */
  --bg-3:   #384159;   /* pressed */

  --fg-0:   #f4f1ea;   /* linen · primary text */
  --fg-1:   #c6c3bb;   /* muted linen · secondary */
  --fg-2:   #8a8f9c;   /* fog */
  --fg-3:   #5a6070;   /* dusk */

  --line:         rgba(244, 241, 234, 0.08);
  --line-strong:  rgba(244, 241, 234, 0.14);
  --line-focus:   rgba(244, 241, 234, 0.35);

  --accent:      #a3c27a;   /* lightened olive · readable on ink */
  --accent-ink:  #b5d28d;
  --accent-soft: rgba(163, 194, 122, 0.10);
  --accent-glow: rgba(163, 194, 122, 0.22);

  --toffee:      #d4a274;   /* warmed toffee · readable on ink */
  --toffee-soft: rgba(212, 162, 116, 0.10);

  --ok:     #a3c27a;
  --warn:   #d9a063;
  --error:  #d7877c;
  --info:   #8aa5c4;

  --shadow-whisper:0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-soft:   0 4px 24px rgba(0, 0, 0, 0.30);
  --shadow-float:  0 12px 48px rgba(0, 0, 0, 0.40);
  --ring-focus:    0 0 0 3px rgba(163, 194, 122, 0.25);
}

/* ─────────────────────────────────────────────────────────────
   Semantic element styles
   ───────────────────────────────────────────────────────────── */

html, body {
  background: var(--bg-0);
  color: var(--fg-0);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

/* Display — literary serif, generous leading, tight tracking only at size */
.display, h1.display {
  font-family: var(--font-serif-display);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-regular);    /* serifs carry weight at low stroke */
  color: var(--fg-0);
}

h1 {
  font-family: var(--font-serif-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-regular);
  color: var(--fg-0);
}

h2 {
  font-family: var(--font-serif-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-regular);
  color: var(--fg-0);
}

h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
  color: var(--fg-0);
}

p {
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--fg-0);
  text-wrap: pretty;
}

small, .meta {
  font-size: var(--fs-sm);
  color: var(--fg-1);
}

/* Small-caps eyebrow label — the only uppercase we use */
.label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-2);
  font-weight: var(--fw-medium);
}

code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.mono-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-1);
  background: var(--bg-2);
  padding: 2px 8px;
  border-radius: var(--r-full);
  letter-spacing: 0;
}

/* The core pairing rule. User's raw thought = serif italic, dim.
   AI's structured output = sans, normal, bright ink. */
.transcript {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  font-style: italic;
  color: var(--fg-1);
  line-height: var(--lh-loose);
}

.structured {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--fg-0);
  line-height: var(--lh-normal);
}

hr, .rule {
  border: 0;
  border-top: var(--bw-hair) solid var(--line);
  margin: var(--sp-7) 0;
}

*:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--r-2);
}

::selection {
  background: var(--accent-soft);
  color: var(--accent);
}