/* ═══════════════════════════════════════════════════════════
   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-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-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

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

  /* Transitions */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-fast: 150ms 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);
}