:root {
  color-scheme: dark;

  --color-bg:         #0a0a0a;
  --color-surface:    #111111;
  --color-surface-2:  #161616;
  --color-border:     #1f1f1f;
  --color-border-dim: #171717;
  --color-accent:     #2563eb;
  --color-accent-dim: #1d4ed8;
  --color-accent-glow:rgba(37, 99, 235, 0.15);
  --color-text:       #f0f0f0;
  --color-muted:      #6b7280;
  --color-muted-dim:  #4b5563;
  --color-error:      #ef4444;
  --color-success:    #22c55e;

  --color-scrollbar-thumb: #2a2a2a;
  --color-cursor-ring:     rgba(245, 245, 245, 0.5);
  --color-overlay-hover:   rgba(255, 255, 255, 0.03);
  --color-on-accent:       #ffffff;
  --color-glass-border:    rgba(255, 255, 255, 0.10);
  --color-glass-bg:        rgba(255, 255, 255, 0.05);
  --color-ba-label-bg:     rgba(0, 0, 0, 0.55);

  --gradient-product:      linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #1e3a5f 100%);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.82rem + 0.27vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1.05rem + 0.37vw, 1.25rem);
  --text-xl:   clamp(1.25rem,  1.15rem + 0.5vw,  1.5rem);
  --text-2xl:  clamp(1.5rem,   1.3rem  + 1vw,    2rem);
  --text-3xl:  clamp(1.875rem, 1.5rem  + 1.87vw, 3rem);
  --text-4xl:  clamp(2.5rem,   1.9rem  + 3vw,    4.5rem);
  --text-hero: clamp(3.5rem,   2.2rem  + 6.5vw,  8.5rem);

  --space-1:  clamp(0.2rem,   0.15rem + 0.25vw,  0.25rem);
  --space-2:  clamp(0.375rem, 0.25rem + 0.5vw,   0.5rem);
  --space-3:  clamp(0.5rem,   0.375rem + 0.75vw, 0.75rem);
  --space-4:  clamp(0.75rem,  0.5rem  + 1vw,     1rem);
  --space-5:  1.25rem;
  --space-6:  clamp(1rem,     0.75rem + 1.5vw,   1.5rem);
  --space-8:  clamp(1.25rem,  1rem    + 2vw,     2rem);
  --space-10: clamp(1.75rem,  1.25rem + 2.5vw,   2.5rem);
  --space-12: clamp(2rem,     1.5rem  + 3vw,     3rem);
  --space-16: clamp(2.5rem,   2rem    + 4vw,     4rem);
  --space-20: clamp(3.5rem,   2.5rem  + 5vw,     5rem);
  --space-24: clamp(4rem,     3rem    + 6vw,     6rem);
  --space-32: clamp(5rem,     4rem    + 8vw,     8rem);

  --nav-height:        72px;
  --container-narrow:  72ch;
  --container-width:   1280px;
  --container-wide:    1600px;
  --container-full:    1920px;
  --container-padding: clamp(1.25rem, 5vw, 3rem);

  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   200ms;
  --dur-base:   400ms;
  --dur-slow:   800ms;
  --dur-xslow:  1200ms;

  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;
}

:root[data-theme="light"] {
  color-scheme: light;

  --color-bg:         #c5c5c5;
  --color-surface:    #d4d4d4;
  --color-surface-2:  #b3b3b3;
  --color-border:     #9a9a9a;
  --color-border-dim: #828282;
  --color-accent:     #2563eb;
  --color-accent-dim: #1d4ed8;
  --color-accent-glow:rgba(37, 99, 235, 0.32);
  --color-text:       #15171a;
  --color-muted:      #5c636f;
  --color-muted-dim:  #857c6c;
  --color-error:      #dc2626;
  --color-success:    #16a34a;

  --color-scrollbar-thumb: #c4bdac;
  --color-cursor-ring:     rgba(20, 20, 20, 0.7);
  --color-overlay-hover:   rgba(0, 0, 0, 0.06);
  --color-on-accent:       #ffffff;
  --color-glass-border:    rgba(255, 255, 255, 1);
  --color-glass-bg:        rgba(255, 255, 255, 0.6);
  --color-ba-label-bg:     rgba(255, 255, 255, 0.78);

  --gradient-product:      linear-gradient(135deg, #93c5fd 0%, #818cf8 50%, #6366f1 100%);
}