/* ================================================================
   DESIGN TOKENS
================================================================ */

:root  {
  color-scheme: dark;
  --black: #000000;
  --deep: #03030a;
  --dark: #08080f;
  --surface: #0d0d18;
  --surface-2: #12121f;
  --border: rgba(255, 255, 255, 0.07);
  --border-hover: rgba(255, 255, 255, 0.18);
  --border-cyan: rgba(0, 195, 255, 0.25);
  --cyan: #00c3ff;
  --cyan-dim: #008fbb;
  --blue: #0044ff;
  --electric: #3a7bff;
  --gold: #ffd060;
  --amber: #ff9500;
  --green: #00ff88;
  --purple: #7c55ff;
  --pink: #ff2277;
  --text-primary: #ffffff;
  --text-secondary: #c8c8d8;
  --text-muted: #787890;
  --text-dim: #3a3a50;
  --grad-white: linear-gradient(135deg, #ffffff 0%, #b8b8c8 50%, #ffffff 100%);
  --grad-cyan: linear-gradient(135deg, #00c3ff, #0044ff);
  --grad-gold: linear-gradient(135deg, #ffd060, #ff9500);
  --grad-glow: radial-gradient( circle, rgba(0, 195, 255, 0.08) 0%, transparent 70% );
  --space-xs: 10px;
  --space-sm: 20px;
  --space-md: 40px;
  --space-lg: 80px;
  --space-xl: 120px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --t-fast: color 0.15s var(--ease), background-color 0.15s var(--ease), border-color 0.15s var(--ease), opacity 0.15s var(--ease), transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
  --t-base: color 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease), opacity 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.22s var(--ease);
  --t-slow: transform 0.3s var(--ease), border-color 0.25s var(--ease), box-shadow 0.3s var(--ease), opacity 0.25s var(--ease);
  --t-bounce: transform 0.26s var(--ease-bounce), box-shadow 0.26s var(--ease-bounce), background-color 0.22s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);

}