/* ============================================================
   StoryCave marketing site — design tokens
   Mirrored from the StoryCave brand system / Studio tokens
   (app/studio/src/styles/tokens.css). Same color language as the
   consumer app and Studio so the product family reads as one thing
   (CLAUDE.md §5.7, §7). Do not invent a new palette here.
   ============================================================ */

:root {
  /* --- Cave: twilight plum-indigo — hero + footer chrome --- */
  --cave-950: #191029;
  --cave-900: #221a38;
  --cave-800: #2e2350;
  --cave-700: #3d2f68;
  --cave-600: #4f3f85;

  /* --- Parchment: warm paper — page + section backgrounds --- */
  --parchment-100: #fbf6ec;
  --parchment-200: #f3e9d6;
  --paper: #ffffff;

  /* --- Ink: warm near-black text, never pure black --- */
  --ink-900: #241b38;
  --ink-700: #473c5c;
  --ink-500: #6f6382;
  --ink-300: #a79cba;

  /* --- Amber: the lantern glow — primary accent / CTAs --- */
  --amber-100: #fdecc8;
  --amber-400: #e8971f;
  --amber-600: #c97a0e;

  /* --- Grape: magic / personalization accent --- */
  --grape-100: #eee7ff;
  --grape-400: #7c5cfc;
  --grape-600: #5b3fdb;

  /* --- Feedback --- */
  --leaf-400: #2fa968;
  --coral-400: #e15241;

  /* ===================== SEMANTIC ===================== */
  --bg-page: var(--parchment-100);
  --bg-sunken: var(--parchment-200);
  --bg-shell: var(--cave-950);
  --surface-card: var(--paper);

  --text-strong: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-faint: var(--ink-300);
  --text-on-shell: var(--parchment-100);
  --text-on-shell-muted: #b8aece;

  --border: #e7dcc5;
  --border-strong: #d9c9a8;
  --border-on-shell: var(--cave-700);

  --accent: var(--amber-400);
  --accent-strong: var(--amber-600);
  --accent-soft: var(--amber-100);
  --on-accent: var(--ink-900);

  --magic: var(--grape-400);
  --magic-soft: var(--grape-100);
  --magic-strong: var(--grape-600);

  /* --- Type --- */
  --font-display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* --- Radii --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* --- Spacing scale (4px base) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* --- Shadows (soft, warm) --- */
  --shadow-sm: 0 1px 2px rgba(36, 27, 56, 0.06);
  --shadow-md: 0 6px 20px rgba(36, 27, 56, 0.08);
  --shadow-lg: 0 18px 48px rgba(36, 27, 56, 0.12);

  /* --- Layout --- */
  --container: 1080px;
}