/**
 * frontend/css/variables.css
 * Design System — Cardly.gg — Pure Black × White
 */
:root {
  --color-bg:           #080808;
  --color-surface:      #111111;
  --color-surface-2:    #181818;
  --color-surface-3:    #222222;
  --color-border:       rgba(255, 255, 255, 0.07);
  --color-border-hover: rgba(255, 255, 255, 0.16);
  --color-gold:         #ffffff;
  --color-gold-hover:   rgba(255, 255, 255, 0.85);
  --color-gold-dark:    rgba(255, 255, 255, 0.55);
  --color-gold-glow:    rgba(255, 255, 255, 0.07);
  --color-gold-glow-lg: rgba(255, 255, 255, 0.13);
  --color-accent:       #ffffff;
  --color-accent-hover: rgba(255, 255, 255, 0.85);
  --color-accent-dark:  rgba(255, 255, 255, 0.55);
  --color-accent-glow:  rgba(255, 255, 255, 0.07);
  --color-text:         #f0f0f0;
  --color-text-muted:   rgba(240, 240, 240, 0.50);
  --color-text-faint:   rgba(240, 240, 240, 0.28);
  --color-success: #4ade80;
  --color-error:   #f87171;
  --color-warning: #fbbf24;
  --color-info:    #60a5fa;
  --color-discord: #5865F2;
  --color-google:  #ffffff;
  --glass-bg:          rgba(255, 255, 255, 0.04);
  --glass-bg-hover:    rgba(255, 255, 255, 0.07);
  --glass-border:      rgba(255, 255, 255, 0.08);
  --glass-border-high: rgba(255, 255, 255, 0.14);
  --glass-blur:        blur(24px) saturate(160%);
  --glass-blur-heavy:  blur(48px) saturate(180%) brightness(108%);
  --glass-highlight:   inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;
  --text-xs:   0.6875rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-lg:   1.0625rem;
  --text-xl:   1.1875rem;
  --text-2xl:  1.4375rem;
  --text-3xl:  1.75rem;
  --text-4xl:  2.125rem;
  --text-5xl:  2.75rem;
  --text-6xl:  3.5rem;
  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;
  --space-1:  0.25rem;  --space-2:  0.5rem;   --space-3:  0.75rem;
  --space-4:  1rem;     --space-5:  1.25rem;  --space-6:  1.5rem;
  --space-8:  2rem;     --space-10: 2.5rem;   --space-12: 3rem;
  --space-16: 4rem;     --space-20: 5rem;     --space-24: 6rem;
  --radius-sm:   0.3rem;    --radius-md:   0.5rem;
  --radius-lg:   0.75rem;   --radius-xl:   1rem;
  --radius-2xl:  1.375rem;  --radius-full: 9999px;
  --shadow-sm:    0 1px 3px rgba(0,0,0,.6);
  --shadow-md:    0 4px 16px rgba(0,0,0,.65);
  --shadow-lg:    0 10px 36px rgba(0,0,0,.7);
  --shadow-xl:    0 20px 60px rgba(0,0,0,.8);
  --shadow-gold:  0 0 24px rgba(255,255,255,.12);
  --shadow-accent: 0 0 24px rgba(255,255,255,.12);
  --transition-fast:   120ms cubic-bezier(0.4,0,0.2,1);
  --transition-normal: 220ms cubic-bezier(0.4,0,0.2,1);
  --transition-slow:   380ms cubic-bezier(0.4,0,0.2,1);
  --transition-spring: 300ms cubic-bezier(0.34,1.56,0.64,1);
  --z-below:-1; --z-normal:0; --z-above:10; --z-dropdown:100;
  --z-sticky:200; --z-overlay:300; --z-modal:400; --z-toast:500;
}