/* ═══════════════════════════════════════════
   APPEARANCE · dark + light (the only two themes)
   ═══════════════════════════════════════════
   The product previously shipped ten zsh-inspired palettes. That
   was reduced to a single dark / light pair so the colour system
   carries one product opinion instead of ten tastes.

   - data-theme="dark"  → regent (warm gold on near-black)
   - data-theme="light" → atrium (warm paper, forest-green primary)

   `:root[data-theme="…"]` has specificity (0,1,1), beating any plain
   `:root` fallback declared inline in the host page regardless of
   source order. The bootstrap script in index.html / home.html sets
   the attribute synchronously before paint based on the saved
   appearance preference (dark / light / system).
*/

/* ─── Chat typography: humans vs agents ───
   Human-authored text (the user's messages, input bar, topic
   question) renders in Human Sans. Agent-authored text
   (every director's bubble, intent quotes from agents) renders
   in Agent (an italic-shaped face) so the eye separates the two
   speakers without needing a label.

   Both faces are declared font-style: normal so their glyphs
   are used directly via font-family — the italic shape of the
   Agent face is baked in. */
@font-face {
  font-family: "Human Sans";
  src: url("fonts/human-sans.woff2") format("woff2-variations"),
       url("fonts/human-sans.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  /* Latin + extended + general punctuation only. Without this, the
     browser treats Human Sans as covering all Unicode and never falls
     through to system fonts for CJK — Chinese drops in body text and
     especially in print-to-PDF. */
  unicode-range: U+0000-024F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2100-214F;
}
@font-face {
  font-family: "Agent";
  src: url("fonts/agent-Italic.woff2") format("woff2-variations"),
       url("fonts/agent-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-024F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2100-214F;
}

:root {
  /* CJK fallback chain · PingFang SC anchors every stack so Chinese
     glyphs always render as PingFang on macOS rather than falling
     through to whatever `system-ui` resolves to (Songti / Microsoft
     YaHei / Source Han depending on platform). Latin fonts stay
     FIRST so mixed CN/EN prose still picks Human Sans / Inter / Agent
     for English glyphs and only Chinese characters land on PingFang
     via per-glyph fallback. */
  --font-human: "Human Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
                "PingFang SC", "PingFang TC", "Hiragino Sans GB", "Microsoft YaHei",
                "Source Han Sans CN", "Noto Sans CJK SC",
                system-ui, sans-serif;
  /* Agent italic-faced font. ui-sans-serif is a CSS generic keyword
     (must be unquoted) and resolves to the OS default sans-serif before
     hitting -apple-system / system-ui — gives a clean italic synth on
     systems where the bundled "Agent" face fails to load. */
  --font-agent: "Agent", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
                "PingFang SC", "PingFang TC", "Hiragino Sans GB", "Microsoft YaHei",
                "Source Han Sans CN", "Noto Sans CJK SC",
                system-ui, sans-serif;
  /* --sans defaults to the human face — chat input, topic question,
     replies, and live notes use it unless an agent override applies. */
  --sans: var(--font-human);

  /* ─── Radius scale ───
     One axis-of-truth for corner softness. The earlier codebase had
     border-radius values inlined as 4 / 6 / 8 / 12 — bumping the look
     meant find-and-replacing per call-site. These tokens are the new
     single dial: turn one knob, the whole product rounds in lockstep.
     Theme-agnostic (radius doesn't change between dark / light), so
     they live on plain `:root` rather than per-theme. */
  --radius-sm:   6px;     /* small chrome · sidebar rows, hover pills */
  --radius-md:   8px;     /* buttons, inputs, badges with text */
  --radius-lg:   12px;    /* cards, modal panels, search card */
  --radius-xl:   16px;    /* large surfaces (main raised panel) */
  --radius-pill: 9999px;  /* pure pill / circle */
}

/* ─── DARK · regent · warm gold on near-black ───
       The product's default. Token names use the `--lime*` slot for
       the primary accent so every call-site that references the
       primary keeps working — the actual hue is gold (#C9A46B).
       See `docs/theme-system.md` for the full token reference. */
:root[data-theme="dark"] {
  /* ─── Surface ladder · structural panels ───
     Used for solid raised cards, sub-cards, and the chrome shell.
     For *transient* states (hover / active / pressed) prefer the
     alpha overlay tokens below — they layer cleanly over vibrancy
     and stay theme-agnostic at the call site. */
  --bg: #0A0A0A;
  --panel: #131312;
  --panel-2: #21211F;
  --panel-3: #2A2A27;
  /* Sidebar chrome surface · slightly elevated above --bg so the
     nav column reads as its own region. Must live in BOTH theme
     blocks — when only the base :root carries it, light mode falls
     back to this dark value and the sidebar stays black. */
  --sidebar-bg: #191918;
  --strip-bg: color-mix(in srgb, var(--lime) 6%, var(--bg));     /* topbar / bottombar — very subtle brand tint */
  --accent-line: color-mix(in srgb, var(--lime) 22%, var(--bg)); /* brand-tinted hairlines for composer chrome */

  /* ─── Alpha overlay system · macOS / Linear-style ───
     Semantic interaction layers. The values resolve to white-alpha
     on dark themes and black-alpha on light, so a single rule
     (`background: var(--surface-hover)`) reads correctly in both. */
  --surface-hover:  rgba(255, 255, 255, 0.10);
  --surface-active: rgba(255, 255, 255, 0.15);
  --surface-strong: rgba(255, 255, 255, 0.20);

  --line: #26241F;
  --line-bright: #3A3934;
  --line-strong: #5A5852;     /* raised from #4D4B45 so input frames separate from line-bright */

  --text: #C8C5BE;
  --text-soft: #8E8B83;
  --text-dim: #7E7B70;        /* was #5C5A52; raised to ~4.3:1 vs bg, near WCAG AA */
  --text-faint: #5A5848;      /* was #5C5A4D; clearly fainter than dim, OK for hints */
  --text-muted: rgba(255, 255, 255, 0.60);  /* alpha-derived · pairs with surface overlays */

  --lime: #C9A46B;
  --lime-deep: #9A7B40;
  --lime-dim: #5C4422;
  --amber: #A57843;
  --amber-dim: #5E441F;
  --red: #B5706A;
  --cyan: #6A9B97;
  --magenta: #8E7A8E;
}

/* ─── LIGHT · atrium · ChatGPT-style clean white, OpenAI green ───
       Cool neutral grey palette modelled after chatgpt.com light mode:
       pure white main area, very-light-grey sidebar, light-grey lines,
       crisp near-black text.

       Hierarchy ladder, each step ~3-5% L for perceptible elevation
       even before borders apply:
         bg #FFF → panel #FAFAFA → panel-2 #EEEEEE → panel-3 #E4E4E4
         → hi #D4D4D4

       Accent — `--lime` is OpenAI brand green (#10A37F). Dark mode
       still uses regent gold (#C9A46B); both themes carry their own
       brand hue, the semantic ("primary accent") is preserved across
       both. See `docs/theme-system.md` for why the token is still
       called `--lime` despite the hue swap. */
:root[data-theme="light"] {
  --bg: #FFFFFF;
  --panel: #FAFAFA;           /* was #F9F9F9 — micro-adjust for ladder spacing  */
  --panel-2: #EEEEEE;         /* was #F1F1F1 — clearer 1-step pop vs panel      */
  --panel-3: #E4E4E4;         /* was #ECECEC — clearer 2-step                   */
  /* Very-light-grey sidebar against the pure-white (#FFF) main area,
     ChatGPT-style. Sits between --panel and --panel-2 in the ladder
     so the nav column is visibly its own chrome region without going
     dark. (Inverse polarity of the dark theme, where the sidebar is
     LIGHTER than --bg.) */
  --sidebar-bg: #F4F4F4;
  --strip-bg: color-mix(in srgb, var(--lime) 6%, var(--bg));     /* topbar / bottombar — very subtle brand tint */
  --accent-line: color-mix(in srgb, var(--lime) 22%, var(--bg)); /* brand-tinted hairlines for composer chrome */

  /* ─── Alpha overlay system (light theme · black-on-white) ───
     Mirrors the dark-theme set but inverted polarity, so the same
     `var(--surface-hover)` rule looks correct in both modes. */
  --surface-hover:  rgba(0, 0, 0, 0.05);
  --surface-active: rgba(0, 0, 0, 0.08);
  --surface-strong: rgba(0, 0, 0, 0.12);

  --line: #E5E5E5;            /* was #ECECEC — actually visible on white (1.10:1) */
  --line-bright: #C8C8CD;     /* was #D4D4D8 — clearer everyday border          */
  --line-strong: #A6A6AC;     /* was #CCCCCC — structural divider / input frame */

  --text: #0D0D0D;            /* primary — 18.7:1 on bg (AAA)                   */
  --text-soft: #5D5D5D;       /* secondary — 7.0:1 (AAA for text > 18pt)        */
  --text-dim: #717181;        /* was #8E8EA0; lifted to 4.7:1 (AA) for readable */
  --text-faint: #9A9A9A;      /* hint level ~2.8:1 — for disabled/decoration   */
  --text-muted: rgba(0, 0, 0, 0.55);  /* alpha-derived · pairs with surface overlays */

  --lime: #10A37F;            /* OpenAI green — primary accent                  */
  --lime-deep: #0D8868;       /* deeper green — hover / active depth            */
  --lime-dim: #A7E8D0;        /* was #D1FAE5 — visible enough for hover / tints */

  --amber: #C2410C;
  --amber-dim: #FED7AA;
  --red: #DC2626;
  --cyan: #0891B2;
  --magenta: #BE185D;
}

/* No scoped overrides needed.
   - Topbar / classification strips: covered by `--strip-bg`.
   - `.cmp-input-frame` / `.search-card`: default border is `--lime-dim`
     (subtle brand tint), focus is `--lime` (full brand) — set inline
     in index.html, no theme-specific override required. */

/* ─── Global radio control · mono / lime square ──────────────────
   Browser default (blue/system-tinted circle) doesn't match the
   project's mono+lime aesthetic. Override every `<input type=radio>`
   with an `appearance: none` square — thin border idle, lime fill
   with bg-color inner cut when checked. Specificity is intentionally
   minimal (0,0,1) so callers that wrap the radio in custom chrome
   (e.g. `.adjourn-mode-option` hides it 1×1; `.rs-radio-row` sets
   13×13) still win via their parent-selector specificity. Anything
   that just emits a bare `<input type=radio>` picks this style up
   for free. */
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  background: transparent;
  border: 0.5px solid var(--line-bright);
  border-radius: 0;
  position: relative;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
input[type="radio"]:hover:not(:checked) { border-color: var(--text-faint); }
input[type="radio"]:checked {
  border-color: var(--lime);
  background: var(--lime);
}
input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--bg);
}
input[type="radio"]:focus-visible {
  outline: 1px solid var(--lime);
  outline-offset: 1px;
}
input[type="radio"]:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}