/* Design tokens — brand color system, typography, spacing, motion.
   Breakpoints (referenced by value, custom properties don't work in
   @media queries): <480px, 480–768px, 768–1200px, >1200px. */

/* -accent tokens = icons, large text (18px+/14px+bold), UI chrome only.
   -text tokens = any body-copy-sized text. Never use base -accent colors for body text —
   they fail WCAG AA contrast on their paired backgrounds. */

:root {
  /* Brand colors — exact tokens requested in requirements */
  --color-primary-amber: #DF7430; /* Primary CTAs, active states, brand accent */
  --color-am-bg: #FAF1E6;         /* AM/Drop background — warm beige */
  --color-pm-bg: #E8F4EC;         /* PM/Pickup background — soft sage */
  --color-am-accent: #E65100;     /* AM/Drop text & icons */
  --color-pm-accent: #617A5D;     /* PM/Pickup text & icons */
  --color-ink-light: #29241E;     /* Primary text, light mode */
  --color-ink-dark: #FAF6F0;      /* Primary text, dark mode */

  /* Text-safe (WCAG AA body-copy) color variants */
  --color-amber-text: #A75724;
  --color-am-accent-text: #B8460F;
  --color-pm-accent-text: #4E6B4A;

  /* Aliases for code readability and backwards compatibility */
  --color-primary: var(--color-primary-amber);
  --color-bg-am: var(--color-am-bg);
  --color-bg-pm: var(--color-pm-bg);
  --color-accent-am: var(--color-am-accent);
  --color-accent-pm: var(--color-pm-accent);
  --color-ink: var(--color-ink-light);

  --color-primary-hover: #914B1F;

  /* Semantic aliases — page chrome */
  --color-bg: var(--color-am-bg);
  --color-text: var(--color-ink-light);
  --color-surface-light: #FFFFFF;
  --color-surface-dark: #2A241D;
  --color-surface: var(--color-surface-light);

  --color-border-light: rgba(41, 36, 30, 0.12);
  --color-border-dark: rgba(250, 246, 240, 0.14);
  --color-border: var(--color-border-light);

  /* Typography */
  --font-display: 'Poppins', 'Noto Sans', sans-serif;
  --font-body: 'Inter', 'Noto Sans', sans-serif;
  --font-weight-display: 600;

  /* Spacing scale (4px base) */
  --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: 4.5rem;

  /* Layout */
  --container-max: 1200px;
  --container-padding: var(--space-4);

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(41, 36, 30, 0.06), 0 1px 3px rgba(41, 36, 30, 0.08);
  --shadow-md: 0 4px 12px rgba(41, 36, 30, 0.10);

  /* Motion */
  --reveal-duration: 280ms;
  --reveal-ease: ease-out;
  --reveal-distance: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: var(--color-ink-dark);
    --color-am-bg: #2A2118;
    --color-pm-bg: #1E2620;
    --color-surface-dark: #2A241D;
    --color-border-dark: rgba(250, 246, 240, 0.14);
    --color-surface: var(--color-surface-dark);
    --color-border: var(--color-border-dark);
  }
}