/*
 * Default theme — "atelier" editorial neutral.
 *
 * Replaces the prior indigo-on-white SaaS palette (which read as
 * generic AI/template chrome). New direction: a refined fallback that
 * has personality without committing to a dramatic register —
 * warm-alabaster surfaces, soft near-black ink, a single ember accent,
 * Fraunces variable serif paired with Inter (with stylistic-set
 * features) for a calm editorial cadence.
 *
 * Components only ever consume the semantic tokens (`--color-brand-primary`,
 * `--color-surface-page`, …), never the primitives. To add a new theme,
 * copy this block, override the semantic tokens only, and register the
 * key in `app/schema.py` (ThemeKey) + `app/routers/web.py` (THEMES) +
 * `app/theme_meta.py` if the page background is dark.
 */

:root,
[data-theme="default"] {
  /* primitives — warm alabaster + graphite + ember */
  --atelier-canvas: #f8f6f1;
  --atelier-card: #fffefb;
  --atelier-muted: #efebdf;
  --atelier-ink: #171411;
  --atelier-ink-soft: #5a544c;
  --atelier-hairline: #e6e0d1;
  --atelier-ember: #c8542e;
  --atelier-ember-deep: #9a3d1f;
  --atelier-moss: #4f6b3a;

  /* semantic — colour */
  --color-brand-primary: var(--atelier-ink);
  --color-brand-accent: var(--atelier-ember);
  --color-surface-page: var(--atelier-canvas);
  --color-surface-muted: var(--atelier-muted);
  --color-surface-card: var(--atelier-card);
  --color-text-primary: var(--atelier-ink);
  --color-text-muted: var(--atelier-ink-soft);
  --color-text-on-brand: var(--atelier-card);
  --color-border: var(--atelier-hairline);
  --color-positive: var(--atelier-moss);
  --color-negative: var(--atelier-ember-deep);

  /* semantic — typography
     Fraunces is a contemporary variable serif (optical-size + softness
     axes) — distinctive without theatrical, and not overused like
     Playfair/Lora across template land. Inter body uses ss01 + cv11
     for the single-storey g and the straight-tail l, which quiets
     Inter's default character enough to sit beside the serif. */
  --font-family-heading: "Fraunces", "Iowan Old Style", "Charter", "Georgia", serif;
  --font-family-body: "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-size-hero: 36pt;
  --font-size-h2: 16.5pt;
  --font-size-h3: 12.5pt;
  --font-size-body: 10.5pt;
  --font-size-small: 9pt;
  --line-height-body: 1.55;
  --font-weight-heading: 500;

  /* semantic — spacing / shape */
  --space-page-margin: 18mm;
  --space-section-gap: 7mm;
  --radius-tile: 4px;
  --radius-card: 8px;
}
/* Atelier — tight optical tracking on display + Fraunces variable
   font axes (opsz, soft) tuned for hero size. The ss01 + cv11 features
   on Inter quiet its body voice next to the serif. */
[data-theme="default"] .bc-document {
  font-feature-settings: "ss01", "cv11", "kern";
}
[data-theme="default"] .bc-hero__title,
[data-theme="default"] .bc-hero__tagline,
[data-theme="default"] .bc-section__heading,
[data-theme="default"] .bc-cta__heading {
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
  letter-spacing: -0.02em;
}
[data-theme="default"] .bc-page {
  box-shadow: none;
}
/*
 * Fintech theme — navy + gold, formal/data-driven tone.
 * Modeled on Research/Research_on_battle_cards.md §Theme file design.
 * Only semantic tokens are overridden; layout structure is identical to default.
 */

[data-theme="fintech"] {
  --navy-900: #0a1f44;
  --navy-700: #1a3a6b;
  --gold-500: #d4a24c;
  --gold-600: #b8862e;
  --paper: #fbf8f1;

  --color-brand-primary: var(--navy-900);
  --color-brand-accent: var(--gold-500);
  --color-surface-page: var(--paper);
  --color-surface-muted: #f1ece0;
  --color-surface-card: #ffffff;
  --color-text-primary: var(--navy-900);
  --color-text-muted: #5a6b85;
  --color-text-on-brand: var(--gold-500);
  --color-border: #d8d2bf;
  /* Navy-coherent positive/negative — previously inherited default
     emerald/rose, which clashed with the navy/gold register. */
  --color-positive: #1f7a4d;
  --color-negative: #a8312e;

  --font-family-heading: "Söhne", "Georgia", serif;
  --font-family-body: "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-size-hero: 36pt;
  --font-size-h2: 17pt;
  --font-weight-heading: 600;

  --space-page-margin: 12mm;
  --radius-tile: 2px;
  --radius-card: 4px;
}
/* Fintech display cadence — Georgia/Söhne sit tighter on hero
   sizes than the body, so we pull the tracking in slightly. */
[data-theme="fintech"] .bc-hero__title,
[data-theme="fintech"] .bc-section__heading,
[data-theme="fintech"] .bc-cta__heading {
  letter-spacing: -0.012em;
}

/*
 * whole_slur theme — Apple-inspired (see forntend/apple.md).
 * Reverent product photography aesthetic: white + parchment alternation,
 * near-black tiles, single Action Blue accent, SF Pro fallbacks, tight
 * negative letter-spacing on display sizes, 18px utility-card radius.
 */
[data-theme="whole_slur"] {
  /* primitives */
  --apple-canvas: #ffffff;
  --apple-parchment: #f5f5f7;
  --apple-ink: #1d1d1f;
  --apple-ink-muted: #6e6e73;
  --apple-action-blue: #0066cc;
  --apple-hairline: #e0e0e0;
  --apple-positive: #34c759;
  --apple-negative: #ff3b30;

  /* semantic — colour
     Apple-correct mapping: hero taglines + stat values render near-black
     ink (`#1d1d1f`); Action Blue is reserved for the hero accent stripe,
     capability number badges, and the CTA accent — the same usage Apple's
     real visual system specifies (apple.md §Buttons + §Typography). */
  --color-brand-primary: var(--apple-ink);
  --color-brand-accent: var(--apple-action-blue);
  --color-surface-page: var(--apple-canvas);
  --color-surface-muted: var(--apple-parchment);
  --color-surface-card: var(--apple-canvas);
  --color-text-primary: var(--apple-ink);
  --color-text-muted: var(--apple-ink-muted);
  --color-text-on-brand: #ffffff;
  --color-border: var(--apple-hairline);
  --color-positive: var(--apple-positive);
  --color-negative: var(--apple-negative);

  /* semantic — typography
   * SF Pro Display + SF Pro Text resolve on Apple platforms; Inter is the
   * documented open-source equivalent (apple.md §Note on Font Substitutes). */
  --font-family-heading: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --font-family-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --font-size-hero: 38pt;
  --font-size-h2: 17pt;
  --font-size-h3: 13pt;
  --font-size-body: 11pt;
  --font-size-small: 9pt;
  --line-height-body: 1.47;
  --font-weight-heading: 600;

  /* semantic — spacing / shape */
  --space-page-margin: 16mm;
  --space-section-gap: 7mm;
  --radius-tile: 18px;
  --radius-card: 18px;
}
/* Apple's signature "tight" headline cadence — negative tracking. */
[data-theme="whole_slur"] .bc-hero__title,
[data-theme="whole_slur"] .bc-section__heading,
[data-theme="whole_slur"] .bc-cta__heading {
  letter-spacing: -0.022em;
}
/* No text shadow, no decorative chrome — apple.md "Don't add shadows…" */
[data-theme="whole_slur"] .bc-page {
  box-shadow: none;
}

/*
 * monochrome theme — brutalist editorial. Pure black + white, heavy
 * borders, square corners, no decorative chrome. Newspaper energy.
 */
[data-theme="monochrome"] {
  --mono-paper: #ffffff;
  --mono-parchment: #f4f4f4;
  --mono-ink: #000000;
  --mono-soft: #555555;
  --mono-accent: #d11f1f;

  --color-brand-primary: var(--mono-ink);
  --color-brand-accent: var(--mono-accent);
  --color-surface-page: var(--mono-paper);
  --color-surface-muted: var(--mono-parchment);
  --color-surface-card: var(--mono-paper);
  --color-text-primary: var(--mono-ink);
  --color-text-muted: var(--mono-soft);
  --color-text-on-brand: var(--mono-paper);
  --color-border: var(--mono-ink);
  /* Positive uses `--mono-soft` instead of ink so the WW-table check
     icon background renders as a distinct mid-gray pill rather than
     black-on-near-black (which made the "yes" cue invisible). */
  --color-positive: var(--mono-soft);
  --color-negative: var(--mono-accent);

  --font-family-heading: "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-family-body: "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-size-hero: 40pt;
  --font-size-h2: 18pt;
  --font-size-h3: 13pt;
  --font-size-body: 10pt;
  --font-size-small: 8.5pt;
  --line-height-body: 1.45;
  --font-weight-heading: 800;

  --space-page-margin: 14mm;
  --space-section-gap: 6mm;
  --radius-tile: 0px;
  --radius-card: 0px;
}
/* Monochrome — newspaper headline cadence: tight tracking, condensed
   feel without changing the family. The thicker page rule reinforces
   the brutalist register on screen previews. */
[data-theme="monochrome"] .bc-hero__title,
[data-theme="monochrome"] .bc-section__heading,
[data-theme="monochrome"] .bc-cta__heading {
  letter-spacing: -0.025em;
}
@media screen {
  [data-theme="monochrome"] .bc-page {
    border-width: 2px;
    box-shadow: none;
  }
}

/*
 * kraft theme — warm artisan paper. Cream backgrounds, terracotta brand,
 * olive accent, serif headings. For craft / food / heritage products.
 */
[data-theme="kraft"] {
  --kraft-paper: #f4ebd9;
  --kraft-card: #fbf5e6;
  --kraft-tan: #ebdfc1;
  --kraft-terracotta: #b65d3a;
  --kraft-olive: #6b6b3e;
  --kraft-ink: #2b2113;
  --kraft-muted: #6b6157;
  --kraft-border: #d6c2a3;

  --color-brand-primary: var(--kraft-terracotta);
  --color-brand-accent: var(--kraft-olive);
  --color-surface-page: var(--kraft-paper);
  --color-surface-muted: var(--kraft-tan);
  --color-surface-card: var(--kraft-card);
  --color-text-primary: var(--kraft-ink);
  --color-text-muted: var(--kraft-muted);
  --color-text-on-brand: var(--kraft-paper);
  --color-border: var(--kraft-border);
  --color-positive: var(--kraft-olive);
  --color-negative: var(--kraft-terracotta);

  --font-family-heading: "Lora", "Georgia", "Times New Roman", serif;
  --font-family-body: "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-size-hero: 34pt;
  --font-size-h2: 16pt;
  --font-size-h3: 12.5pt;
  --font-size-body: 10pt;
  --font-size-small: 8.5pt;
  --line-height-body: 1.55;
  --font-weight-heading: 600;

  --space-page-margin: 14mm;
  --space-section-gap: 6mm;
  --radius-tile: 12px;
  --radius-card: 10px;
}
/* Kraft — Lora italic for the hero tagline only, so the display word
   reads as artisan handwriting next to the upright section heads.
   Section heads stay upright Lora 600. */
[data-theme="kraft"] .bc-hero__tagline {
  font-style: italic;
  font-weight: 500;
}

/*
 * sage theme — botanical / wellness. Cream + deep sage + dusty rose.
 * Serif headings, generous line-height. For health, eco, lifestyle.
 */
[data-theme="sage"] {
  --sage-cream: #f5f1e8;
  --sage-card: #fbf8ee;
  --sage-deep: #2f4a36;
  --sage-rose: #c8917e;
  --sage-ink: #2a3324;
  /* `--sage-muted` darkened from #6f7a64 → #5a6452 so the body-muted
     copy clears WCAG AA against `--color-surface-muted`. */
  --sage-muted: #5a6452;
  --sage-border: #d9d2bd;

  --color-brand-primary: var(--sage-deep);
  --color-brand-accent: var(--sage-rose);
  --color-surface-page: var(--sage-cream);
  --color-surface-muted: #ebe6d6;
  --color-surface-card: var(--sage-card);
  --color-text-primary: var(--sage-ink);
  --color-text-muted: var(--sage-muted);
  --color-text-on-brand: var(--sage-cream);
  --color-border: var(--sage-border);
  --color-positive: var(--sage-deep);
  --color-negative: var(--sage-rose);

  --font-family-heading: "Lora", "Georgia", serif;
  --font-family-body: "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-size-hero: 33pt;
  --font-size-h2: 16pt;
  --font-size-h3: 12.5pt;
  --font-size-body: 10pt;
  --font-size-small: 8.5pt;
  --line-height-body: 1.55;
  --font-weight-heading: 500;

  --space-page-margin: 14mm;
  --space-section-gap: 6mm;
  --radius-tile: 14px;
  --radius-card: 12px;
}
/* Sage — Lora italic on the hero tagline keeps the wellness/editorial
   tone soft. Section heads stay upright Lora 500 for hierarchy. */
[data-theme="sage"] .bc-hero__tagline {
  font-style: italic;
  font-weight: 500;
}

/*
 * linear theme — Linear.app pro dark workspace.
 * Restrained dark mode: deep slate canvas, subtle panel cards, lavender
 * hero on violet accent. For B2B SaaS / dev productivity tooling.
 * Pairs with `terminal` (data-dense Bloomberg dark) for two distinct
 * dark registers; `linear` is the quiet one.
 */
[data-theme="linear"] {
  --linear-canvas: #0c0d10;
  --linear-panel: #1a1c20;
  --linear-mid: #23252a;
  --linear-hairline: #2a2c33;
  --linear-text: #e6e7ea;
  --linear-text-muted: #9298a4;
  --linear-violet: #5e6ad2;
  --linear-lavender: #b4befe;
  --linear-mint: #4cb782;
  --linear-rose: #eb5757;

  --color-brand-primary: var(--linear-lavender);
  --color-brand-accent: var(--linear-violet);
  --color-surface-page: var(--linear-canvas);
  --color-surface-muted: var(--linear-mid);
  --color-surface-card: var(--linear-panel);
  --color-text-primary: var(--linear-text);
  --color-text-muted: var(--linear-text-muted);
  --color-text-on-brand: var(--linear-canvas);
  --color-border: var(--linear-hairline);
  --color-positive: var(--linear-mint);
  --color-negative: var(--linear-rose);

  --font-family-heading: "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-family-body: "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-size-hero: 34pt;
  --font-size-h2: 16pt;
  --font-size-h3: 12pt;
  --font-size-body: 10pt;
  --font-size-small: 8.5pt;
  --line-height-body: 1.5;
  --font-weight-heading: 500;

  --space-page-margin: 14mm;
  --space-section-gap: 6mm;
  --radius-tile: 6px;
  --radius-card: 10px;
}
/* Linear — quiet UI tracking. Inter at display sizes drifts slightly
   loose; we pull it back so the hero feels engineered rather than
   marketing-deck-ish. */
[data-theme="linear"] .bc-hero__title,
[data-theme="linear"] .bc-section__heading,
[data-theme="linear"] .bc-cta__heading {
  letter-spacing: -0.014em;
}

/*
 * cohere theme — matches the app shell's editorial system (DESIGN.md).
 * Selecting this theme makes the preview read as a press kit inside its
 * own host: warm-stone page, near-black brand, signature coral accent,
 * Inter 600 headings. The host chrome (announcement bar, nav, footer)
 * uses the same palette via `--co-*` tokens in app.css.
 */
[data-theme="cohere"] {
  --cohere-stone: #fafaf7;
  --cohere-card: #ffffff;
  --cohere-near-black: #0b0b0b;
  --cohere-coral: #ff7759;
  --cohere-soft-coral: #ffad9b;
  --cohere-ink: #212121;
  --cohere-slate: #75758a;
  --cohere-hairline: #d9d9dd;
  --cohere-deep-green: #003c33;
  --cohere-error: #b30000;

  --color-brand-primary: var(--cohere-near-black);
  --color-brand-accent: var(--cohere-coral);
  --color-surface-page: var(--cohere-stone);
  --color-surface-muted: var(--cohere-card);
  --color-surface-card: var(--cohere-card);
  --color-text-primary: var(--cohere-ink);
  --color-text-muted: var(--cohere-slate);
  --color-text-on-brand: var(--cohere-card);
  --color-border: var(--cohere-hairline);
  --color-positive: var(--cohere-deep-green);
  --color-negative: var(--cohere-error);

  --font-family-heading: "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-family-body: "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-size-hero: 38pt;
  --font-size-h2: 17pt;
  --font-size-h3: 13pt;
  --font-size-body: 10.5pt;
  --font-size-small: 9pt;
  --line-height-body: 1.5;
  --font-weight-heading: 600;

  --space-page-margin: 16mm;
  --space-section-gap: 7mm;
  --radius-tile: 8px;
  --radius-card: 16px;
}
/* Tightened display tracking — Cohere headlines run tight per DESIGN.md. */
[data-theme="cohere"] .bc-hero__tagline,
[data-theme="cohere"] .bc-section__heading,
[data-theme="cohere"] .bc-cta__heading {
  letter-spacing: -0.018em;
}

/*
 * terminal theme — Bloomberg / IDE / trading-floor aesthetic.
 * Pure black canvas, amber hero, sharp green accent, JetBrains Mono
 * everywhere, sharp-cornered cards. Data-dense and high-contrast for
 * fintech-trader / dev-tooling product positioning.
 */
[data-theme="terminal"] {
  --term-black: #0a0a0a;
  --term-card: #171717;
  --term-mid: #1f1f1f;
  --term-amber: #ffaa00;
  --term-green: #33ff33;
  --term-red: #ff3344;
  --term-text: #e8e8e6;
  --term-text-muted: #888888;
  --term-hairline: #2a2a2a;

  --color-brand-primary: var(--term-amber);
  --color-brand-accent: var(--term-green);
  --color-surface-page: var(--term-black);
  --color-surface-muted: var(--term-mid);
  --color-surface-card: var(--term-card);
  --color-text-primary: var(--term-text);
  --color-text-muted: var(--term-text-muted);
  --color-text-on-brand: var(--term-black);
  --color-border: var(--term-hairline);
  --color-positive: var(--term-green);
  --color-negative: var(--term-red);

  --font-family-heading: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-family-body: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-size-hero: 30pt;
  --font-size-h2: 14pt;
  --font-size-h3: 11.5pt;
  --font-size-body: 9.5pt;
  --font-size-small: 8pt;
  --line-height-body: 1.45;
  --font-weight-heading: 500;

  --space-page-margin: 14mm;
  --space-section-gap: 6mm;
  --radius-tile: 0px;
  --radius-card: 2px;
}

/*
 * klypup theme — Klypup house brand · McKinsey/Gartner consulting register.
 *
 * The official Klypup brand theme: white canvas, near-black ink, signature
 * purple-to-green gradient as a single thin accent, restrained Source
 * Serif Pro headlines + Source Sans Pro body. Built for board-level
 * battlecards where readability and authority outrank decoration.
 *
 * Position vs. neighbours:
 * - vs `default` (atelier): warmer alabaster + ember accent, Fraunces serif.
 *   `klypup` is the *house* theme — explicit Klypup palette, McKinsey
 *   restraint, dual-color gradient. No warmth.
 * - vs `cohere` (editorial press kit): coral on stone with rounded cards.
 *   `klypup` is sharper-cornered (2px), data-dense (9.5pt body), and
 *   uses purple+green together where `cohere` is single-accent.
 * - vs `fintech` (navy/gold): formal but a different brand register.
 *   `klypup` reads modern-tech-consulting; `fintech` reads banking-PDF.
 *
 * Design philosophy (per the Klypup brand brief):
 * - Color as ACCENT, never decoration. Body copy is always near-black
 *   on white for readability.
 * - Klypup purple `#7F70FF` is the brand mark; green `#6CE2A1` is
 *   reserved for positive/confirmation cues; the two combine only in
 *   the hero gradient.
 * - Professional grey `#3E424D` carries muted/structural copy.
 * - Sharp 2px corners; consulting documents don't have round chrome.
 */
[data-theme="klypup"] {
  /* primitives — Klypup brand */
  --klypup-canvas: #ffffff;
  --klypup-card: #ffffff;
  --klypup-muted: #f5f6f8;
  --klypup-ink: #1a1a1a;
  --klypup-grey: #3e424d;
  --klypup-light-grey: #cfcfcf;
  --klypup-hairline: #e5e6ea;
  --klypup-purple: #7f70ff;
  --klypup-purple-deep: #5a4be0;
  --klypup-green: #6ce2a1;
  --klypup-green-deep: #2f9a66;
  --klypup-red: #c93838;

  /* semantic — colour
     Brand-primary intentionally maps to ink (#1a1a1a), NOT purple.
     Hero titles, section heads, and capability-badge text all render
     near-black; purple is reserved for accent stripes (hero gradient,
     section-heading left border) and the positive/negative cues use
     the brand green/red explicitly. */
  --color-brand-primary: var(--klypup-ink);
  --color-brand-accent: var(--klypup-purple);
  --color-surface-page: var(--klypup-canvas);
  --color-surface-muted: var(--klypup-muted);
  --color-surface-card: var(--klypup-card);
  --color-text-primary: var(--klypup-ink);
  --color-text-muted: var(--klypup-grey);
  --color-text-on-brand: var(--klypup-canvas);
  --color-border: var(--klypup-hairline);
  --color-positive: var(--klypup-green-deep);
  --color-negative: var(--klypup-red);

  /* semantic — typography
     Source Serif Pro for headings (consulting authority); Source Sans
     Pro for body (Adobe's pairing — designed to sit together). Kept
     dense at 9.5pt body / 30pt hero so the page reads as a board
     deck, not a marketing sheet. */
  --font-family-heading: "Source Serif Pro", "Source Serif 4", "Charter", "Georgia", serif;
  --font-family-body: "Source Sans Pro", "Source Sans 3", "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-size-hero: 30pt;
  --font-size-h2: 15pt;
  --font-size-h3: 11.5pt;
  --font-size-body: 9.5pt;
  --font-size-small: 8pt;
  --line-height-body: 1.5;
  --font-weight-heading: 600;

  /* semantic — spacing / shape */
  --space-page-margin: 14mm;
  --space-section-gap: 5mm;
  --radius-tile: 2px;
  --radius-card: 2px;
}
/* Klypup hero accent — purple→green gradient bar where the default
   theme uses a flat hairline. The `bc-hero` rule already sets
   `position: relative` in `battlecard.css`, so the ::after sits
   inside without extra layout. */
[data-theme="klypup"] .bc-hero {
  border-bottom-color: transparent;
}
[data-theme="klypup"] .bc-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--klypup-purple) 0%, var(--klypup-green) 100%);
}
/* McKinsey-style "subsection header with a colored stripe" — the
   single piece of brand colour on every page-section heading. */
[data-theme="klypup"] .bc-section__heading {
  border-left: 3px solid var(--klypup-purple);
  padding-left: 4mm;
}
/* Headlines tighten subtly — Source Serif Pro at display sizes
   benefits from the same negative tracking the Cohere/Whole-slur
   themes use. */
[data-theme="klypup"] .bc-hero__title,
[data-theme="klypup"] .bc-hero__tagline,
[data-theme="klypup"] .bc-cta__heading {
  letter-spacing: -0.015em;
}
/* No card shadow — consulting documents don't float. */
[data-theme="klypup"] .bc-page {
  box-shadow: none;
}