/* ===========================================================================
 * THEME A — BROADSHEET
 *
 * Mood: a Financial Times weekend supplement, set by an agency designer.
 * Bold black Helvetica Now Display headlines inside solid yellow blocks;
 * cream canvas; EB Garamond italic pullquotes. One accent colour. Zero
 * drop-shadows. Rounded corners flattened. Direct sibling to
 * felixvelarde.com and 2y3x.com — a reader immediately feels the family
 * resemblance.
 *
 * Loaded as a CSS override on top of app.css when the root element carries
 * data-theme="broadsheet". Does NOT duplicate structural rules — just
 * overrides tokens and a handful of theme-specific selectors.
 * ======================================================================= */

html[data-theme='broadsheet'] {
  /* -- Paper & ink -------------------------------------------------------- */
  --bg: #faf7ee;                  /* warm newsprint cream */
  --paper: #ffffff;               /* pure white card surfaces */
  --ink: #111111;                 /* rich black, never pure #000 elsewhere */
  --ink-soft: #2a2a2a;
  --muted: #6b6a67;
  --rule: #e6e1d4;
  --rule-strong: #c9c1ae;

  /* -- Accent (the single yellow from the book jacket + felixvelarde.com) */
  --accent: #ffd100;              /* Monotype-ish safety yellow */
  --accent-ink: #111111;          /* black text ON yellow */
  --accent-hover: #e6bc00;
  --accent-soft: #fff4b3;

  /* -- Status (muted, newspaper-friendly) --------------------------------- */
  --danger: #b02424;
  --danger-soft: #f7dede;
  --success: #2e6b34;

  /* -- Typography ---------------------------------------------------------
   * Body uses 'Helvetica Now Text' — the optical cut tuned for running
   * copy. Falls through to 'Helvetica Now' (the base family) if the Text
   * weight the browser wants isn't installed. Headlines use the Display
   * cut. All fonts self-hosted from /fonts/. */
  --font-display: 'Helvetica Now Display', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Helvetica Now Text', 'Helvetica Now', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Helvetica Now Micro', 'Helvetica Neue', Arial, sans-serif;
  --font-quote: 'EB Garamond', 'Iowan Old Style', Georgia, serif;

  /* -- Type scale (larger, more confident than default) ------------------- */
  --fs-display: clamp(2.75rem, 7vw, 5.5rem);
  --fs-h1: clamp(1.875rem, 3.2vw, 2.75rem);
  --fs-h2: 1.5rem;
  --fs-lead: 1.1875rem;
  --fs-base: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.75rem;

  --lh-display: 0.96;
  --lh-heading: 1.08;
  --lh-body: 1.55;

  /* -- Shape: broadsheet flattens everything ------------------------------ */
  --radius-xs: 0;
  --radius-sm: 0;
  --radius: 0;
  --radius-lg: 0;

  /* -- Elevation: no shadows in broadsheet -------------------------------- */
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: none;
}

/* -- Universal letter-spacing override -------------------------------------
 * Broadsheet calls for every selector's letter-spacing to be normal
 * (browser default) regardless of what app.css sets. A universal rule
 * scoped to the theme root would lose specificity against multi-class
 * app.css rules like `.hero .pullquote cite` (0,0,2,1). `!important`
 * is the right hammer here — it's an explicit theme directive, not a
 * per-selector style override.
 * ------------------------------------------------------------------------- */
html[data-theme='broadsheet'] *,
html[data-theme='broadsheet'] *::before,
html[data-theme='broadsheet'] *::after {
  letter-spacing: normal !important;
}

/* -- Base body typography -------------------------------------------------- */
html[data-theme='broadsheet'] body {
  font-feature-settings: 'kern', 'liga';
  font-weight: 500;                   /* body copy target weight */
  letter-spacing: normal;
}

/* -- Headline treatment: big, heavy, tight ---------------------------------
 * Helvetica Now Display at weight 800 (ExtraBold). Variable-font axes
 * stripped since the installed kit is discrete weights, not variable.
 * ------------------------------------------------------------------------- */
html[data-theme='broadsheet'] .display,
html[data-theme='broadsheet'] h1,
html[data-theme='broadsheet'] h2,
html[data-theme='broadsheet'] h3,
html[data-theme='broadsheet'] h4,
html[data-theme='broadsheet'] .brand {
  font-family: var(--font-display);
  font-variation-settings: normal;
  font-weight: 800;
  letter-spacing: normal;
}

html[data-theme='broadsheet'] .display {
  font-weight: 800;
  letter-spacing: normal;
}

/* Emphasis inside headlines renders as the headline itself — same face,
 * same weight, no italic. The default Broadsheet look (Garamond italic
 * inside the sans headline) read as a typesetting accident in the live
 * hero; flattening it lets the headline land as a single geometric mass. */
html[data-theme='broadsheet'] .display em,
html[data-theme='broadsheet'] h1 em,
html[data-theme='broadsheet'] h2 em,
html[data-theme='broadsheet'] h3 em {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  color: inherit;
  font-variation-settings: normal;
}

/* H2 / H3 — same weight 800 as H1 for a consistent headline voice */
html[data-theme='broadsheet'] .h2,
html[data-theme='broadsheet'] .admin-h2,
html[data-theme='broadsheet'] h2,
html[data-theme='broadsheet'] h3 {
  font-weight: 800;
  letter-spacing: normal;
}

html[data-theme='broadsheet'] .admin-h1 {
  font-weight: 800;
  font-family: var(--font-display);
}

/* -- Labels / meta / counters / mono-ish uses HN Micro Light ------------- */
html[data-theme='broadsheet'] .label,
html[data-theme='broadsheet'] .meta,
html[data-theme='broadsheet'] .counter,
html[data-theme='broadsheet'] .step__num,
html[data-theme='broadsheet'] .hero__meta dt,
html[data-theme='broadsheet'] .pill,
html[data-theme='broadsheet'] .brand .brand__tag,
html[data-theme='broadsheet'] .kbdhint {
  font-family: var(--font-mono);
  font-weight: 300;
  letter-spacing: normal;
}

html[data-theme='broadsheet'] .brand {
  font-weight: 900;
  letter-spacing: normal;
  align-items: baseline;
}
html[data-theme='broadsheet'] .brand .brand__dash { color: var(--ink); font-weight: 900; }

/* app.css sets align-self: center on .brand__tag which pushes the small
 * "ADVISOR" lozenge to the vertical middle of the "Scale at Speed" cap
 * height. We want the tag to sit on the baseline of the logotype. */
html[data-theme='broadsheet'] .brand .brand__tag {
  align-self: baseline;
}

/* -- Lead paragraph: plain sans, matches body weight 600 ---------------- */
html[data-theme='broadsheet'] .lead {
  font-family: var(--font-body);
  font-weight: 500;
  font-variation-settings: normal;
  color: var(--ink-soft);
  font-size: 1.1875rem;
  line-height: 1.5;
  letter-spacing: normal;
}

/* ==========================================================================
 * THE hero block. Signature felixvelarde.com move: a tight black headline
 * sitting inside a solid yellow rectangle. Two 20×20 colour accents sit
 * flush against the bottom-right corner of the yellow block (red on the
 * left, blue on the right) — a quiet nod to the book-cover palette.
 * ========================================================================= */
html[data-theme='broadsheet'] .hero__headline {
  background: var(--accent);
  color: var(--ink);
  padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 2.5vw, 2rem);
  /* make it hug the text on large screens, stretch on mobile */
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-bottom: var(--sp-3);
  position: relative;
}

/* Two 40×40 squares flush with the bottom-right corner of the yellow block,
 * sitting side-by-side (red then blue, reading left-to-right). */
html[data-theme='broadsheet'] .hero__headline::before,
html[data-theme='broadsheet'] .hero__headline::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  bottom: 0;
  pointer-events: none;
}
html[data-theme='broadsheet'] .hero__headline::before {
  background: #e6322e;                /* book-cover crimson */
  right: 40px;
}
html[data-theme='broadsheet'] .hero__headline::after {
  background: #1fa9e4;                /* book-cover sky blue */
  right: 0;
}

/* -- Pullquote in the hero: Garamond italic, no left border. Size bumped
 *    to 1.4× the previous 1.25rem (→ 1.75rem) so the editorial voice hits
 *    harder against the headline. Zero margin — browsers apply a default
 *    blockquote { margin: 1em 40px } which pushes this inwards.  ------- */
html[data-theme='broadsheet'] .hero .pullquote,
html[data-theme='broadsheet'] blockquote.pullquote {
  margin: 0;
  border-left: 0;
  padding-left: 0;
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.35;
  color: var(--ink);
  font-variation-settings: normal;
  letter-spacing: normal;
}
html[data-theme='broadsheet'] .hero .pullquote cite,
html[data-theme='broadsheet'] blockquote.pullquote cite {
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 300;
  color: var(--muted);
}

/* ==========================================================================
 * Buttons: flat, no radius. Primary is black-on-cream; the Upgrade CTA
 * and Send want a more declarative yellow variant.
 * ========================================================================= */
html[data-theme='broadsheet'] .btn {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: normal;
  padding: 0.95rem 1.5rem;
  border-radius: 0;
  transition: background 120ms ease, color 120ms ease;
}
html[data-theme='broadsheet'] .btn--primary {
  background: var(--ink);
  color: #fff;
  border: 0;
}
html[data-theme='broadsheet'] .btn--primary:hover {
  background: var(--accent);
  color: var(--ink);
}
html[data-theme='broadsheet'] .btn--accent {
  background: var(--accent);
  color: var(--ink);
  font-weight: 700;
}
html[data-theme='broadsheet'] .btn--accent:hover {
  background: var(--ink);
  color: var(--accent);
}
html[data-theme='broadsheet'] .btn--ghost {
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
}
html[data-theme='broadsheet'] .btn--ghost:hover {
  background: var(--ink);
  color: var(--bg);
}
html[data-theme='broadsheet'] .btn--link {
  font-family: var(--font-mono);
  font-weight: 300;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ink);
  text-underline-offset: 4px;
}
html[data-theme='broadsheet'] .btn--link:hover {
  text-decoration-color: var(--accent);
}

/* ==========================================================================
 * Forms: flat inputs, black border on focus — no glow
 * ========================================================================= */
html[data-theme='broadsheet'] .input,
html[data-theme='broadsheet'] .textarea {
  border-radius: 0;
  border-color: var(--rule-strong);
  background: var(--paper);
}
html[data-theme='broadsheet'] .input:focus,
html[data-theme='broadsheet'] .textarea:focus {
  border-color: var(--ink);
  box-shadow: none;
}

/* ==========================================================================
 * Cards + banners: flat, with accent-border for alert states
 * ========================================================================= */
html[data-theme='broadsheet'] .card {
  border-radius: 0;
  border: 1px solid var(--ink);
  background: var(--paper);
}
html[data-theme='broadsheet'] .banner {
  background: var(--accent);
  color: var(--ink);
  border: 0;
  border-radius: 0;
}
html[data-theme='broadsheet'] .banner a { color: var(--ink); font-weight: 700; }

/* ==========================================================================
 * Dock / chat input area
 * ========================================================================= */
html[data-theme='broadsheet'] .dock__form {
  border-radius: 0;
  border: 1px solid var(--ink);
}
html[data-theme='broadsheet'] .dock__form:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--accent);
}
html[data-theme='broadsheet'] .dock__limit {
  border-radius: 0;
  border: 1px solid var(--ink);
}

/* ==========================================================================
 * Chat messages — Broadsheet flavour
 * User bubbles: yellow, black text, flat rectangles
 * Advisor: sans-serif at reading size, plain cream background
 * ========================================================================= */
html[data-theme='broadsheet'] .msg--user .msg__body {
  background: var(--accent);
  border: 0;
  color: var(--ink);
  font-family: var(--font-body);
  border-radius: 0;
}
html[data-theme='broadsheet'] .msg--assistant .msg__body {
  font-family: var(--font-body);
  font-weight: 500;
  font-variation-settings: normal;
  color: var(--ink);
  line-height: 1.6;
  letter-spacing: normal;
}
html[data-theme='broadsheet'] .msg--assistant .msg__body strong {
  font-family: 'Helvetica Now Text', 'Helvetica Now', Arial, sans-serif;
  font-weight: 700;
}
html[data-theme='broadsheet'] .msg--assistant .msg__body em {
  font-family: var(--font-quote);
  font-style: italic;
  color: var(--ink);
}

/* Chat empty-state example quote renders as an editorial pull-quote:
 * EB Garamond italic at a generous size so the example "tell the advisor
 * about your business" prompt reads as an invitation, not UI chrome. */
html[data-theme='broadsheet'] .chat-empty em {
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: 400;
  font-size: 1.25em;
  color: var(--ink);
}

/* ==========================================================================
 * Counter pill in topbar
 * ========================================================================= */
html[data-theme='broadsheet'] .counter {
  border-radius: 0;
  border: 1px solid var(--ink);
  background: var(--paper);
}

/* ==========================================================================
 * Step numbers — bold accent
 * ========================================================================= */
html[data-theme='broadsheet'] .step__num { color: var(--ink); font-weight: 300; }
html[data-theme='broadsheet'] .step h3 { font-weight: 900; font-family: var(--font-display); }

/* ==========================================================================
 * Footer
 * ========================================================================= */
html[data-theme='broadsheet'] .footer {
  border-top: 2px solid var(--ink);
  padding-top: var(--sp-3);
  color: var(--ink);
}
html[data-theme='broadsheet'] .footer a { color: var(--ink); }

/* ==========================================================================
 * Admin dashboard: keep utilitarian but align typographically
 * ========================================================================= */
html[data-theme='broadsheet'] .admin-table { border-radius: 0; }
html[data-theme='broadsheet'] .admin-topbar { border-bottom: 2px solid var(--ink); }
html[data-theme='broadsheet'] .kpi { border-radius: 0; border: 1px solid var(--ink); }
html[data-theme='broadsheet'] .kpi__value { font-family: var(--font-display); font-weight: 900; }
html[data-theme='broadsheet'] .pill { border-radius: 0; padding: 0.15rem 0.5rem; }

/* ==========================================================================
 * Typing indicator dots stay on brand
 * ========================================================================= */
html[data-theme='broadsheet'] .typing span { background: var(--ink); }

/* ==========================================================================
 * Focus ring: square, high-contrast
 * ========================================================================= */
html[data-theme='broadsheet'] :focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 0;
}