:root {
  
  --color-bg:           #EEF2FF;            
  --color-surface:      #ffffff;
  --color-card:         #ffffff;

  
  --color-accent:       #818CF8;            
  --color-accent-hover: #6366F1;            

  
  --color-know:         #34D399;            
  --color-know-hover:   #10B981;            
  --color-know-text:    #064E3B;            

  
  --color-review:       #FBBF24;            
  --color-review-hover: #F59E0B;            
  --color-review-text:  #78350F;            

  
  --color-text:         #1E293B;            
  --color-text-muted:   #64748B;            

  
  --color-border:       #C7D2FE;            

  
  --gradient-bg:        linear-gradient(160deg, #EEF2FF 0%, #ECFDF5 55%, #FAF5FF 100%);
  --gradient-logo:      linear-gradient(135deg, #667EEA 0%, #764BA2 100%);

  
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;

  
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-pill: 999px;

  
  --shadow-card:   0 2px 16px rgba(47, 62, 70, 0.08), 0 1px 4px rgba(47, 62, 70, 0.04);
  --shadow-button: 0 1px 4px rgba(47, 62, 70, 0.12);

  
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --flip-duration:   0.5s cubic-bezier(0.16, 1, 0.3, 1);

  
  --max-width:   480px;
  --card-width:  100%;
  --card-min-h:  220px;
}

[data-theme="svelte"] {
  --color-bg:           #EFF6FF;            
  --color-surface:      #ffffff;

  --color-accent:       #3B82F6;            
  --color-accent-hover: #2563EB;            

  --color-know:         #10B981;            
  --color-know-hover:   #059669;            
  --color-know-text:    #064E3B;

  --color-review:       #F59E0B;            
  --color-review-hover: #D97706;            
  --color-review-text:  #78350F;

  --color-text:         #1F2937;            
  --color-text-muted:   #6B7280;            

  --color-border:       #BFDBFE;            

  --gradient-bg:        linear-gradient(160deg, #EFF6FF 0%, #EEF2FF 55%, #F5F3FF 100%);
  --gradient-logo:      linear-gradient(135deg, #3B82F6 0%, #7C3AED 100%);
}