/* ============================================================
   Drops Design System — Foundations
   Dark premium · Glass · Neon-accented · Tech-minimal
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --surface-0:        #0B0B0F;
  --surface-1:        #0F1015;
  --surface-2:        #14151C;
  --surface-3:        #1B1D27;
  --surface-4:        #232532;
  --surface-deep-navy:#0F172A;

  --glass-1:          rgba(255, 255, 255, 0.03);
  --glass-2:          rgba(255, 255, 255, 0.05);
  --glass-3:          rgba(255, 255, 255, 0.08);
  --glass-border:     rgba(255, 255, 255, 0.08);
  --glass-border-hi:  rgba(255, 255, 255, 0.14);

  --fg-1:             #F5F6FA;
  --fg-2:             #C5C8D6;
  --fg-3:             #8A8FA3;
  --fg-4:             #5A5F73;
  --fg-disabled:      #3A3D4D;

  --brand-violet:     #7C5CFF;
  --brand-violet-hi:  #9B82FF;
  --brand-violet-lo:  #5A3DE6;
  --brand-blue:       #4D8DFF;
  --brand-blue-hi:    #6FA3FF;
  --brand-blue-lo:    #2E6FE0;
  --brand-cyan:       #38E1FF;
  --brand-magenta:    #E156FF;

  --violet-tint-12:   rgba(124, 92, 255, 0.12);
  --violet-tint-20:   rgba(124, 92, 255, 0.20);
  --blue-tint-12:     rgba(77, 141, 255, 0.12);
  --cyan-tint-12:     rgba(56, 225, 255, 0.12);

  --success:          #2BD9A0;
  --success-tint:     rgba(43, 217, 160, 0.12);
  --warning:          #FFB547;
  --warning-tint:     rgba(255, 181, 71, 0.12);
  --danger:           #FF5C7A;
  --danger-tint:      rgba(255, 92, 122, 0.12);
  --info:             #4D8DFF;
  --info-tint:        rgba(77, 141, 255, 0.12);

  --grad-primary:     linear-gradient(135deg, #7C5CFF 0%, #4D8DFF 100%);
  --grad-primary-hi:  linear-gradient(135deg, #9B82FF 0%, #6FA3FF 100%);
  --grad-neon:        linear-gradient(135deg, #7C5CFF 0%, #38E1FF 100%);
  --grad-aurora:      linear-gradient(135deg, #E156FF 0%, #7C5CFF 50%, #38E1FF 100%);
  --grad-text:        linear-gradient(180deg, #FFFFFF 0%, #B5B9CC 100%);
  --grad-card-sheen:  linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 40%);

  --glow-violet:      radial-gradient(60% 60% at 50% 0%, rgba(124, 92, 255, 0.35), transparent 70%);
  --glow-blue:        radial-gradient(60% 60% at 50% 100%, rgba(77, 141, 255, 0.28), transparent 70%);

  --font-sans:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:        'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --fs-display-2xl:   88px;
  --fs-display-xl:    72px;
  --fs-display-lg:    56px;
  --fs-display-md:    44px;
  --fs-display-sm:    36px;
  --fs-h1:            32px;
  --fs-h2:            24px;
  --fs-h3:            20px;
  --fs-h4:            18px;
  --fs-body-lg:       17px;
  --fs-body:          15px;
  --fs-body-sm:       13px;
  --fs-caption:       12px;
  --fs-overline:      11px;

  --lh-tight:         1.05;
  --lh-snug:          1.2;
  --lh-normal:        1.45;
  --lh-relaxed:       1.6;

  --tr-tight:         -0.03em;
  --tr-snug:          -0.015em;
  --tr-normal:        0;
  --tr-wide:          0.04em;
  --tr-overline:      0.12em;

  --fw-regular:       400;
  --fw-medium:        500;
  --fw-semibold:      600;
  --fw-bold:          700;
  --fw-extrabold:     800;

  --space-0:  0;    --space-1:  4px;  --space-2:  8px;  --space-3:  12px;
  --space-4:  16px; --space-5:  20px; --space-6:  24px; --space-8:  32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;
  --space-24: 96px; --space-32: 128px;

  --r-xs:   6px;  --r-sm:  8px;   --r-md:  12px; --r-lg:  16px;
  --r-xl:   20px; --r-2xl: 28px;  --r-3xl: 36px; --r-full: 9999px;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.35);
  --shadow-md: 0 8px 20px rgba(0,0,0,0.45);
  --shadow-lg: 0 18px 40px rgba(0,0,0,0.55);
  --shadow-xl: 0 30px 80px rgba(0,0,0,0.6);

  --inset-hairline: inset 0 1px 0 rgba(255,255,255,0.08);
  --inset-glass:    inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.2);

  --glow-violet-sm: 0 0 0 1px rgba(124,92,255,0.35), 0 8px 24px rgba(124,92,255,0.25);
  --glow-violet-md: 0 0 0 1px rgba(124,92,255,0.4),  0 12px 40px rgba(124,92,255,0.35);
  --glow-blue-sm:   0 0 0 1px rgba(77,141,255,0.35),  0 8px 24px rgba(77,141,255,0.25);
  --glow-cyan-sm:   0 0 24px rgba(56,225,255,0.35);

  --border-hairline: 1px solid rgba(255,255,255,0.06);
  --border-soft:     1px solid rgba(255,255,255,0.08);
  --border-strong:   1px solid rgba(255,255,255,0.14);
  --border-brand:    1px solid rgba(124,92,255,0.4);

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;
  --dur-slower:  560ms;

  --container-max:  1200px;
  --container-wide: 1320px;
  --gutter:    24px;
  --gutter-lg: 48px;
}