/*
 * Primary → Main brand color, primary buttons, main CTAs
 * Accent → Secondary highlights, badges, links, decorative elements, hover states
 * Muted → Subtle backgrounds, disabled states, secondary text
 */
:root {
  /* Core brand / actions */
  --color-primary: oklch(0.35 0.18 0);
  --color-primary-foreground: white;

  /* Accent / highlights (what you use on special elements) */
  --color-accent: oklch(0.62 0.22 12);
  --color-accent-foreground: white;

  /* Neutral layers */
  --color-background: white;
  --color-surface: oklch(0.985 0.002 247);
  --color-surface2: oklch(0.977 0.013 264.5);
  --color-surface3: oklch(0.951 0.026 264.5);

  --color-muted: oklch(0.951 0.026 264.5);
  --color-muted-foreground: oklch(0.554 0.046 252);

  --color-border: oklch(0.869 0.022 252);
  --color-border2: oklch(0.83 0.03 252);

  /* Text hierarchy */
  --color-foreground: oklch(0.279 0.041 252);
  --color-foreground-muted: oklch(0.379 0.042 252);
}