/* ==========================================================================
   Design System Tokens
   ========================================================================== */

:root {
  /* Foundation */
  --surface-base: hsl(40, 30%, 98%);
  --surface-1: hsl(40, 25%, 99%);
  --surface-2: hsl(40, 20%, 100%);
  --surface-inset: hsl(40, 20%, 95%);

  /* Ink */
  --ink-primary: hsl(20, 15%, 15%);
  --ink-secondary: hsl(20, 8%, 45%);
  --ink-tertiary: hsl(20, 6%, 45%);
  --ink-muted: hsl(20, 5%, 72%);

  /* Accent */
  --accent: hsl(16, 70%, 45%);
  --accent-hover: hsl(16, 70%, 38%);
  --accent-subtle: hsl(16, 40%, 94%);

  /* Borders */
  --border: rgba(60, 40, 30, 0.08);
  --border-emphasis: rgba(60, 40, 30, 0.15);
  --border-focus: hsl(16, 70%, 45%);

  /* Semantic */
  --success: hsl(145, 45%, 42%);
  --warning: hsl(38, 80%, 55%);
  --danger: hsl(0, 65%, 55%);
  --danger-hover: hsl(0, 65%, 45%);
  --danger-subtle: hsl(0, 50%, 95%);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

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