:root {
  /* ============================================
     🎨 Background scale (white -> subtle gray)
     ============================================ */
  --background-100: #ffffff;
  --background-200: #f9fafb;
  --background-300: #f3f4f6;
  --background-400: #e5e7eb;
  --background-500: #d1d5db;
  --background-600: #9ca3af;
  --background-700: #6b7280;
  --background-800: #4b5563;
  --background-900: #374151;

  /* ============================================
     🎨 Foreground scale (black -> muted gray)
     ============================================ */
  --foreground-100: #000000;
  --foreground-200: #111827;
  --foreground-300: #1f2937;
  --foreground-400: #374151;
  --foreground-500: #4b5563;
  --foreground-600: #6b7280;
  --foreground-700: #9ca3af;
  --foreground-800: #d1d5db;
  --foreground-900: #f3f4f6;

  /* ============================================
     🎨 Primary scale (purple with 500 as center - purple-700)
     ============================================ */
  --primary-100: #8e51ff; /* converted from oklch(62.7% 0.265 303.9) */
  --primary-200: #8f4af8; /* interpolated */
  --primary-300: #9043f1; /* interpolated */
  --primary-400: #913ceb; /* interpolated */
  --primary-500: #9333ea; /* purple-700 as center */
  --primary-600: #7e22ce;
  --primary-700: #6b21a8;
  --primary-800: #581c87;
  --primary-900: #3b0764;
  
  /* ============================================
   🖋️ Primary on-colors
   (foreground text/icons on these backgrounds)
   ============================================ */
--primary-on-100: #ffffff; /* white on bright purple */
--primary-on-200: #ffffff; /* white on bright purple */
--primary-on-300: #ffffff; /* white on bright purple */
--primary-on-400: #ffffff; /* white on bright purple */
--primary-on-500: #ffffff; /* white on purple-700 */
--primary-on-600: #ffffff; /* white on darker purple */
--primary-on-700: #ffffff; /* white on darker purple */
--primary-on-800: #ffffff; /* white on darker purple */
--primary-on-900: #ffffff; /* white on darkest purple */

  /* ============================================
     🎨 Secondary scale (teal)
     ============================================ */
  --secondary-100: #00bc7d; /* bright green */
  --secondary-200: #00a168; /* interpolated between 100-500 */
  --secondary-300: #008653; /* interpolated between 100-500 */
  --secondary-400: #006b3e; /* interpolated between 100-500 */
  --secondary-500: #007a55; /* center */
  --secondary-600: #006a48; /* interpolated between 500-900 */
  --secondary-700: #005a3b; /* interpolated between 500-900 */
  --secondary-800: #004a2e; /* interpolated between 500-900 */
  --secondary-900: #004f3b; /* dark green */

/* ============================================
   🖋️ Secondary on-colors
   (foreground text/icons on these backgrounds)
   ============================================ */
--secondary-on-100: #ffffff; /* white on bright green */
--secondary-on-200: #ffffff; /* white on green */
--secondary-on-300: #ffffff; /* white on green */
--secondary-on-400: #ffffff; /* white on green */
--secondary-on-500: #ffffff; /* white on green */
--secondary-on-600: #ffffff; /* white on dark green */
--secondary-on-700: #ffffff; /* white on dark green */
--secondary-on-800: #ffffff; /* white on dark green */
--secondary-on-900: #ffffff; /* white on darkest green */

  /* ============================================
     🎨 Neutral scale (classic grays)
     ============================================ */
  --neutral-100: #f9fafb;
  --neutral-200: #f3f4f6;
  --neutral-300: #e5e7eb;
  --neutral-400: #d1d5db;
  --neutral-500: #9ca3af;
  --neutral-600: #6b7280;
  --neutral-700: #4b5563;
  --neutral-800: #374151;
  --neutral-900: #1f2937;
}

/* ============================================
   🪄 Semantic mapping
   ============================================ */
:root {
  --color-background: var(--background-100);
  --color-background-muted: var(--background-200);
  --color-background-hover: var(--background-300);

  --color-foreground: var(--foreground-100);
  --color-foreground-muted: var(--foreground-500);

  --color-primary: var(--primary-700);
  --color-primary-hover: var(--primary-800);
  --color-primary-muted: var(--primary-200);

  --color-secondary: var(--secondary-700);
  --color-secondary-hover: var(--secondary-800);
  --color-secondary-muted: var(--secondary-200);

  --color-surface: var(--neutral-100);
  --color-surface-muted: var(--neutral-200);
  --color-border: var(--neutral-300);
}

/* ============================================
   🔧 Component classes
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: background 0.3s, color 0.3s, transform 0.2s;
  cursor: pointer;
  text-decoration: none;
}

.btn-primary {
  background-color: var(--primary-500);
  color: var(--primary-on-500);
}

.btn-primary:hover {
  background-color: var(--primary-600);
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: var(--secondary-500);
  color: var(--secondary-on-500);
}

.btn-secondary:hover {
  background-color: var(--secondary-600);
  transform: translateY(-2px);
}

.card {
  background-color: var(--color-surface);
  color: var(--color-foreground);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 1.5rem;
  transition: box-shadow 0.3s, transform 0.2s;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}