/* Material Design 3 Tokens & Color System */
:root {
  /* Color Palette (Deep Indigo & Dynamic Cyan) */
  --md-sys-color-primary: #4F46E5;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #EEF2FF;
  --md-sys-color-on-primary-container: #312E81;

  --md-sys-color-secondary: #0EA5E9;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #E0F2FE;
  --md-sys-color-on-secondary-container: #075985;

  --md-sys-color-tertiary: #10B981;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #D1FAE5;
  --md-sys-color-on-tertiary-container: #065F46;

  --md-sys-color-surface: #0F172A;
  --md-sys-color-surface-dim: #020617;
  --md-sys-color-surface-bright: #1E293B;
  --md-sys-color-surface-container: #1E293B;
  --md-sys-color-surface-container-high: #334155;

  --md-sys-color-on-surface: #F8FAFC;
  --md-sys-color-on-surface-variant: #94A3B8;
  --md-sys-color-outline: #475569;
  --md-sys-color-outline-variant: #334155;

  --md-sys-color-error: #EF4444;
  --md-sys-color-error-container: #450A0A;
  --md-sys-color-on-error: #FFFFFF;

  --md-sys-color-gold: #F59E0B;
  --md-sys-color-gold-container: #451A03;

  /* Elevation & Shadows */
  --md-sys-shadow-1: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --md-sys-shadow-2: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --md-sys-shadow-glow: 0 0 25px rgba(79, 70, 229, 0.35);

  /* Shape & Radius */
  --md-sys-shape-corner-xs: 4px;
  --md-sys-shape-corner-s: 8px;
  --md-sys-shape-corner-m: 12px;
  --md-sys-shape-corner-l: 16px;
  --md-sys-shape-corner-xl: 24px;
  --md-sys-shape-corner-full: 9999px;

  /* Typography */
  --md-sys-typescale-font: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
}