/* ============================================================================
   Published-surface tokens — the --vse-* brand contract
   ----------------------------------------------------------------------------
   The public deliverable (case-study / answer / FAQ pages at /p/[slug]) is
   token-driven. Every theme skin shares ONE markup layout and ONE stylesheet
   and differs only by the `data-style` attribute plus these `--vse-*` custom
   properties. On a real page the values come from each client's
   brand_memory.brand_tokens; here we ship the six named theme presets from
   web/lib/themes/registry.ts so the lookbook renders unbranded.

   Usage: put data-style="<id>" on the .vse wrapper to pick a preset.
   "editorial" is the default theme; its tokens live on :root.
   ============================================================================ */

/* ---- DEFAULT (editorial): warm documentary editorial ---- */
:root {
  --vse-color-bg: #faf8f3;
  --vse-color-surface: #ffffff;
  --vse-color-fg: #221d17;
  --vse-color-muted: #6b6256;
  --vse-color-primary: #2f5d50;
  --vse-color-primary-fg: #fbfaf6;
  --vse-color-accent: #b2592f;
  --vse-color-border: #e7e1d5;
  --vse-font-display: var(--font-serif-display);
  --vse-font-body: var(--font-body);
  --vse-radius: 6px;
  --vse-space-unit: 8px;
  --vse-max-width: 1080px;
}

/* ---- BOLD: high-contrast dark marketing skin ---- */
[data-style="bold"] {
  --vse-color-bg: #0d0d0f;
  --vse-color-surface: #17171a;
  --vse-color-fg: #f7f6f2;
  --vse-color-muted: #9a9aa3;
  --vse-color-primary: #ff5a36;
  --vse-color-primary-fg: #0d0d0f;
  --vse-color-accent: #ffc93c;
  --vse-color-border: #2b2b31;
  --vse-font-display: var(--font-tight-display);
  --vse-font-body: var(--font-body);
  --vse-radius: 3px;
  --vse-max-width: 1200px;
}

/* ---- MINIMAL: spare type-first Swiss document ---- */
[data-style="minimal"] {
  --vse-color-bg: #ffffff;
  --vse-color-surface: #ffffff;
  --vse-color-fg: #161618;
  --vse-color-muted: #74747c;
  --vse-color-primary: #161618;
  --vse-color-primary-fg: #ffffff;
  --vse-color-accent: #3a3af0;
  --vse-color-border: #e6e6e9;
  --vse-font-display: var(--font-tight-display);
  --vse-font-body: var(--font-body);
  --vse-radius: 0px;
  --vse-max-width: 680px;
}

/* ---- MODERN SAAS: clean product page, cool blues, soft shadows ---- */
[data-style="saas"] {
  --vse-color-bg: #f7f9fc;
  --vse-color-surface: #ffffff;
  --vse-color-fg: #0f1b2d;
  --vse-color-muted: #5b6b82;
  --vse-color-primary: #2563eb;
  --vse-color-primary-fg: #ffffff;
  --vse-color-accent: #0ea5e9;
  --vse-color-border: #e3e9f2;
  --vse-font-display: var(--font-tight-display);
  --vse-font-body: var(--font-body);
  --vse-radius: 12px;
  --vse-max-width: 1120px;
}

/* ---- WARM: terracotta on cream, serif display, large radii ---- */
[data-style="warm"] {
  --vse-color-bg: #f6eee6;
  --vse-color-surface: #fffcf8;
  --vse-color-fg: #3b2e25;
  --vse-color-muted: #8b7765;
  --vse-color-primary: #c8633c;
  --vse-color-primary-fg: #ffffff;
  --vse-color-accent: #5f7d5a;
  --vse-color-border: #e9dbcb;
  --vse-font-display: var(--font-serif-display);
  --vse-font-body: var(--font-body);
  --vse-radius: 16px;
  --vse-max-width: 1040px;
}

/* ---- CLINICAL: structured medical-record skin, teal, hairline rules ---- */
[data-style="clinical"] {
  --vse-color-bg: #f4f7f9;
  --vse-color-surface: #ffffff;
  --vse-color-fg: #152834;
  --vse-color-muted: #5a6b76;
  --vse-color-primary: #0e7c86;
  --vse-color-primary-fg: #ffffff;
  --vse-color-accent: #1d6fa5;
  --vse-color-border: #d5e0e6;
  --vse-font-display: var(--font-tight-display);
  --vse-font-body: var(--font-body);
  --vse-radius: 4px;
  --vse-max-width: 1080px;
}

/* A soft card shadow brands can opt into for an elevated, modern feel
   (used by the saas + warm presets via [data-style] overrides in the skin). */
:root {
  --vse-soft-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 28px -16px rgba(15, 23, 42, 0.18);
}