:root[data-theme="claymorphism"] {
  --color-bg:              #f0f4f8;
  --color-surface:         #e8ecf0;
  --color-surface-alt:     #ffffff;
  --color-border:          #d1d9e6;
  --color-primary:         #6366f1;
  --color-primary-hover:   #4f46e5;
  --color-primary-glow:    rgba(99, 102, 241, 0.35);
  --color-text:            #1e293b;
  --color-text-muted:      #64748b;
  --color-text-on-primary: #ffffff;
  --color-accent:          #f472b6;
  --font-heading:          'Nunito', 'Poppins', sans-serif;
  --font-body:             'Inter', system-ui, sans-serif;
  --radius-sm:             12px;
  --radius-md:             20px;
  --radius-lg:             32px;
  --radius-full:           9999px;
  --transition:            all 0.3s ease;
  --shadow-sm:             4px 4px 10px #d1d9e6, -4px -4px 10px #ffffff;
  --shadow-md:             8px 8px 20px #d1d9e6, -8px -8px 20px #ffffff;
  --shadow-lg:             16px 16px 40px #d1d9e6, -16px -16px 40px #ffffff;
  --shadow-neu-out:        20px 20px 40px #d1d9e6, -20px -20px 40px #ffffff;
  --shadow-neu-in:         inset 4px 4px 8px #b8c0cc, inset -4px -4px 8px #ffffff;
}