/* Design Tokens
   Keep color palette to 5 total:
   - Primary: Blue (#1E90FF)
   - Accent:  Green (#9AE841)
   - Neutrals: White (#FFFFFF), Light Gray (#F5F7FA), Dark Gray (#2E3238)
*/
:root {
  /* Colors */
  --color-blue: #1e90ff;
  --color-green: #9ae841;
  --color-white: #ffffff;
  --color-gray-50: #f5f7fa;
  --color-gray-900: #2e3238;

  /* Semantic */
  --bg-surface: var(--color-gray-50);
  --bg-body: var(--color-white);
  --text-primary: var(--color-gray-900);
  --text-inverse: var(--color-white);
  --brand: var(--color-blue);
  --cta: var(--color-green);

  /* Typography */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji",
    "Segoe UI Emoji";
  --font-display: "Exo 2", var(--font-sans);

  /* Sizing & Radius */
  --container-max: 1200px;
  --radius-full: 9999px;
  --radius-md: 10px;

  /* Shadows */
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.05);

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