/*
 * Design tokens — single source of truth for color, type, spacing, radius,
 * and shadow across the storefront AND the admin panel. See /DESIGN.md.
 * Every other CSS file should reference these custom properties rather than
 * raw hex/px/font values.
 */

:root {
  /* Color */
  --color-ivory: #FAF6F0;
  --color-surface: #FFFFFF;
  --color-ink: #2A2521;
  --color-ink-muted: #6B6259;
  --color-sand: #E6DCCF;
  --color-sand-dark: #C9BBA8;
  --color-rust: #AE5A3C;
  --color-rust-dark: #8F4830;
  --color-forest: #29433A;
  --color-brass: #B08D57;
  --color-success: #3F7A5C;
  --color-error: #B23B3B;
  --color-warning: #C08A2E;

  /* Typography */
  --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;

  --text-display: 3.5rem;
  --text-h1: 2.5rem;
  --text-h2: 1.875rem;
  --text-h3: 1.375rem;
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-eyebrow: 0.75rem;

  /* Spacing */
  --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;
  --space-32: 128px;

  /* Radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(42, 37, 33, 0.06);
  --shadow-md: 0 4px 16px rgba(42, 37, 33, 0.08);
  --shadow-lg: 0 12px 32px rgba(42, 37, 33, 0.12);

  /* Border */
  --border-default: 1px solid var(--color-sand);
  --border-strong: 1px solid var(--color-sand-dark);

  /* Layout */
  --container-max: 1280px;
}