/* ---------------------------------------------------------------
   Design tokens — colors, typography, spacing, motion, elevation.
   Single source of truth for visual style.
   --------------------------------------------------------------- */
:root {
  /* Brand palette */
  --cream: #f5f0e8;
  --parchment: #ede3cd;
  --gold: #c9922a;
  --gold-light: #e8b84b;
  --rust: #8b3a1a;
  --deep-brown: #2b1a0e;
  --ink: #1a120a;
  --white: #fdfaf4;

  /* Outreach (green) accents */
  --green-deep: #0f2418;
  --green-mid: #1a3a2a;
  --green-soft: #7ec89a;
  --green-pale: #c8f0d8;
  --green-action: #4caf50;

  /* Semantic */
  --color-bg: var(--cream);
  --color-surface: var(--white);
  --color-surface-alt: var(--parchment);
  --color-surface-dark: var(--deep-brown);
  --color-text: var(--ink);
  --color-text-soft: #3d2a18;
  --color-text-muted: #5a3e28;
  --color-text-on-dark: var(--white);
  --color-text-on-dark-muted: rgba(253, 250, 244, 0.65);
  --color-border-soft: rgba(201, 146, 42, 0.2);
  --color-focus: var(--gold-light);
  --color-success-bg: #e8f5e9;
  --color-success-fg: #2e7d32;
  --color-success-border: #4caf50;

  /* Type */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Lora', Georgia, serif;
  --font-label: 'Cinzel', 'Times New Roman', serif;

  /* Spacing scale (4 / 8 system) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 5rem;

  /* Radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-card: 0 2px 20px rgba(43, 26, 14, 0.07);
  --shadow-card-hover: 0 8px 30px rgba(43, 26, 14, 0.12);
  --shadow-cta: 0 4px 20px rgba(201, 146, 42, 0.35);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  /* Layout */
  --container: 1100px;
  --container-narrow: 900px;
  --nav-height: 56px;

  /* Z-index scale */
  --z-base: 0;
  --z-sticky: 100;
  --z-drawer: 200;
  --z-modal: 1000;
}