/*
 * RPG Map Editor — public site design tokens.
 *
 * Scope: the v2 marketing shell (homepage, /generators/*). The Editor ships its
 * own CSS from map-editor/web and never loads this file; legacy marketing pages
 * keep css/01–16 until they are migrated.
 *
 * Breakpoints (used as literal values in media queries, CSS variables cannot be):
 *   --bp-sm 640px · --bp-md 860px · --bp-lg 1100px
 */
:root {
  color-scheme: dark;

  /* Surfaces: near-black with a cool cast so warm map art carries the colour. */
  --c-bg: #0b0d10;
  --c-bg-raised: #101318;
  --c-surface: #141920;
  --c-surface-2: #1b212a;
  --c-surface-3: #232a35;
  --c-line: rgba(255, 255, 255, .08);
  --c-line-strong: rgba(255, 255, 255, .16);

  /* Text — all pairs below meet WCAG AA on --c-bg and --c-surface. */
  --c-text: #eef0f3;
  --c-text-muted: #aab2bd;
  --c-text-subtle: #8a93a0;

  /* Accent: parchment gold, sampled from the generators' default ink. */
  --c-accent: #e8b25c;
  --c-accent-hover: #f2c47a;
  --c-accent-ink: #1b1306;
  --c-accent-soft: rgba(232, 178, 92, .12);
  --c-sage: #8fc3a5;
  --c-sage-soft: rgba(143, 195, 165, .12);
  --c-focus: #ffd58a;

  /* Type */
  --ff-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --ff-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-xs: .78rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --fs-2xl: clamp(1.6rem, 1.25rem + 1.4vw, 2.25rem);
  --fs-3xl: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --fs-hero: clamp(2.5rem, 1.6rem + 4.2vw, 4.75rem);
  --lh-tight: 1.06;
  --lh-snug: 1.25;
  --lh-body: 1.6;

  /* Spacing (4px base) */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-section: clamp(4rem, 3rem + 5vw, 7.5rem);

  /* Shape and depth */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, .55);
  --shadow-lg: 0 30px 80px -24px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .05);

  /* Layout */
  --w-page: 1200px;
  --w-wide: 1360px;
  --w-prose: 68ch;
  --gutter: clamp(1rem, .5rem + 2.4vw, 2.5rem);
  --header-h: 64px;

  --ease-out: cubic-bezier(.2, .7, .2, 1);
}