*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #F5F3FF;
  --surface:   #FFFFFF;
  --surface-2: #FAF9FF;
  --border:    #E0E7FF;
  --border-2:  #C7D2FE;
  --primary:   #6366F1;
  --primary-h: #4F46E5;
  --primary-s: #EEF2FF;
  --primary-l: rgba(99,102,241,0.08);
  --accent:    #059669;
  --accent-s:  #ECFDF5;
  --violet:    #7C3AED;
  --violet-s:  #F5F3FF;
  --text:      #1E1B4B;
  --text-2:    #312E81;
  --muted:     #6B7280;
  --success:   #059669;
  --success-s: #ECFDF5;
  --error:     #DC2626;
  --error-s:   #FEF2F2;
  --warning:   #D97706;
  --warning-s: #FFFBEB;
  --info:      #2563EB;
  --info-s:    #EFF6FF;
  --radius:    12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(99,102,241,0.04);
  --shadow:    0 2px 8px rgba(99,102,241,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(99,102,241,0.12);
  --shadow-lg: 0 8px 32px rgba(99,102,241,0.16);
}