/* ═══════════════════════════════════════════════════════════
   Design Tokens — brand custom properties, both surfaces
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Brand palette */
  --color-espresso: #2C1810;
  --color-roast: #5C3D2E;
  --color-brew: #7A5C4F;
  --color-copper: #C67D3E;
  --color-copper-light: #D4985E;
  --color-copper-dark: #A0612E;
  --color-amber: #E8A84C;
  --color-cream: #FAF6F0;
  --color-latte: #F0E8DD;
  --color-parchment: #E8DFD2;
  --color-steam: #D4C9BA;
  --color-ink: #2A1F14;
  --color-muted: #8B7D6B;
  --color-success: #4A7A3E;
  --color-error: #B83B2B;

  /* Typography */
  --font-display: "Playfair Display", "Georgia", serif;
  --font-body: "DM Sans", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Menlo", monospace;

  /* Spacing scale (8px base) */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;

  /* Layout */
  --content-max: 1120px;
  /* Single-column measure widths (max-inline-size on cards/forms/alerts), ascending.
     Repeated per-surface widths; one-off page widths stay inline. */
  --measure-narrow: 400px;
  --measure-form: 420px;
  --measure-card: 480px;
  --measure-diag: 520px;
  --measure-wide: 560px;
  --measure-panel: 600px;
  --measure-content: 640px;
  --measure-page: 720px;

  /* Transitions */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-fast: 150ms var(--ease-out);
  --transition-base: 300ms var(--ease-out);

  /* Semantic surfaces */
  --color-surface: var(--color-cream);
  --color-danger: var(--color-error);
  --color-error-bg: #fef2f2;
  --color-error-text: var(--color-error);
  --color-muted-accessible: #6B5D4F;

  /* Aliases */
  --text-secondary: var(--color-muted);
  --color-border: var(--color-parchment);
  --bg-secondary: var(--color-latte);
}