/* =================================================================
   Design Tokens
   All colors, radii, and shared values used across the project.
   ================================================================= */

:root {
  /* ---- Radii ---- */
  --radius: 0.75rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);

  /* ---- Palette (oklch) ---- */
  --background: oklch(0.985 0.004 90);
  --surface: oklch(1 0 0);
  --surface-dark: oklch(0.22 0.02 250);
  --foreground: oklch(0.18 0.02 260);
  --primary: oklch(0.78 0.14 175);
  --primary-foreground: oklch(0.18 0.02 260);
  --muted-foreground: oklch(0.5 0.02 260);
  --border: oklch(0.9 0.01 260);
  --highlight: oklch(0.92 0.19 105);

  /* ---- Fonts ---- */
  --font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* ---- Breakpoints (reference only — used in @media) ---- */
  /* sm: 480px  |  md: 768px  |  lg: 1024px */
}