/* ================================================================
   ELITEHOSTING.IN — Design Tokens v1.0
   "Dark Space Terminal" aesthetic — premium, Indian tech vibe
   ================================================================ */

:root {
  /* ── Color Palette ─────────────────────────────────────────── */
  --color-void:      #03020A;
  --color-deep:      #060610;
  --color-surface-1: #0A090F;
  --color-surface-2: #11101A;
  --color-surface-3: #18161F;
  --color-surface-4: #201E2A;

  /* ── Brand Accents ─────────────────────────────────────────── */
  --electric: #00D4FF;
  --electric-dim: #00A8CC;
  --electric-soft: rgba(0,212,255,0.12);
  --electric-glow: rgba(0,212,255,0.25);

  --mint: #00FFA3;
  --mint-dim: #00CC82;
  --mint-soft: rgba(0,255,163,0.10);
  --mint-glow: rgba(0,255,163,0.20);

  --plasma: #7C3AED;
  --plasma-soft: rgba(124,58,237,0.12);
  --plasma-glow: rgba(124,58,237,0.25);

  --fire: #FF6B35;
  --fire-soft: rgba(255,107,53,0.10);

  --india: #FF9933;
  --india-soft: rgba(255,153,51,0.10);

  /* ── Semantic Colors ───────────────────────────────────────── */
  --success: #00FFA3;
  --success-bg: rgba(0,255,163,0.08);
  --success-border: rgba(0,255,163,0.20);
  --warning: #FFD60A;
  --warning-bg: rgba(255,214,10,0.08);
  --warning-border: rgba(255,214,10,0.20);
  --error: #FF4D4F;
  --error-bg: rgba(255,77,79,0.08);
  --error-border: rgba(255,77,79,0.20);
  --info: #60A5FA;
  --info-bg: rgba(96,165,250,0.08);
  --info-border: rgba(96,165,250,0.20);

  /* ── Text Hierarchy ────────────────────────────────────────── */
  --text-primary:   #FFFFFF;
  --text-secondary: rgba(255,255,255,0.72);
  --text-muted:     rgba(255,255,255,0.42);
  --text-disabled:  rgba(255,255,255,0.22);
  --text-electric:  var(--electric);
  --text-mint:      var(--mint);

  /* ── Border System ─────────────────────────────────────────── */
  --border:       rgba(255,255,255,0.06);
  --border-2:     rgba(255,255,255,0.10);
  --border-3:     rgba(255,255,255,0.16);
  --border-focus: var(--electric);
  --border-error: var(--error);

  /* ── Glass Effect ──────────────────────────────────────────── */
  --glass-bg:     rgba(255,255,255,0.04);
  --glass-border: rgba(255,255,255,0.08);
  --glass-blur:   blur(24px) saturate(180%);

  /* ── Shadows ───────────────────────────────────────────────── */
  --shadow-xs:      0 1px 3px rgba(0,0,0,0.4);
  --shadow-sm:      0 2px 8px rgba(0,0,0,0.5);
  --shadow-md:      0 4px 20px rgba(0,0,0,0.6);
  --shadow-lg:      0 8px 40px rgba(0,0,0,0.7);
  --shadow-xl:      0 16px 60px rgba(0,0,0,0.8);
  --shadow-card:    0 4px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04);
  --shadow-modal:   0 24px 80px rgba(0,0,0,0.85);
  --shadow-electric: 0 0 0 1px var(--electric), 0 0 24px var(--electric-glow);
  --shadow-mint:     0 0 0 1px var(--mint), 0 0 24px var(--mint-glow);
  --shadow-plasma:   0 0 0 1px var(--plasma), 0 0 24px var(--plasma-glow);
  --shadow-btn:      0 4px 15px rgba(0,212,255,0.35);
  --shadow-input:    0 0 0 3px rgba(0,212,255,0.14);

  /* ── Typography ────────────────────────────────────────────── */
  --font-display: 'Syne', 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'DM Sans', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  --text-xs:   11px; --leading-xs: 1.5;
  --text-sm:   13px; --leading-sm: 1.55;
  --text-base: 15px; --leading-base: 1.6;
  --text-md:   17px; --leading-md: 1.55;
  --text-lg:   20px; --leading-lg: 1.4;
  --text-xl:   24px; --leading-xl: 1.3;
  --text-2xl:  30px; --leading-2xl: 1.2;
  --text-3xl:  38px; --leading-3xl: 1.15;
  --text-4xl:  48px; --leading-4xl: 1.1;
  --text-5xl:  60px; --leading-5xl: 1.05;
  --text-hero: clamp(40px, 6vw, 72px);

  /* ── Spacing Scale ─────────────────────────────────────────── */
  --s1:  4px;  --s2:  8px;  --s3: 12px;  --s4: 16px;
  --s5: 20px;  --s6: 24px;  --s7: 28px;  --s8: 32px;
  --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px;
  --s24: 96px; --s32: 128px;

  /* ── Border Radius ─────────────────────────────────────────── */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px;
  --r-lg: 18px; --r-xl: 24px; --r-2xl: 32px;
  --r-pill: 9999px;

  /* ── Transitions ───────────────────────────────────────────── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --t-fast: 0.12s var(--ease);
  --t-base: 0.20s var(--ease);
  --t-slow: 0.35s var(--ease);
  --t-spring: 0.45s var(--ease-spring);

  /* ── Z-index Stack ─────────────────────────────────────────── */
  --z-below: -1; --z-base: 0; --z-raised: 10;
  --z-dropdown: 100; --z-sticky: 200;
  --z-overlay: 300; --z-modal: 400;
  --z-toast: 500; --z-tooltip: 600;

  /* ── Layout ────────────────────────────────────────────────── */
  --max-w-sm:  640px;
  --max-w-md:  768px;
  --max-w-lg: 1024px;
  --max-w-xl: 1200px;
  --max-w-2xl:1400px;
  --sidebar-w: 240px;
  --nav-h:      60px;

  /* ── Gradients ─────────────────────────────────────────────── */
  --grad-electric: linear-gradient(135deg, #00D4FF 0%, #0066FF 100%);
  --grad-mint:     linear-gradient(135deg, #00FFA3 0%, #00D4FF 100%);
  --grad-fire:     linear-gradient(135deg, #FF6B35 0%, #FFD700 100%);
  --grad-plasma:   linear-gradient(135deg, #7C3AED 0%, #C026D3 100%);
  --grad-india:    linear-gradient(135deg, #FF9933 0%, #00FFA3 100%);
  --grad-dark:     linear-gradient(180deg, var(--color-void) 0%, var(--color-deep) 100%);
  --grad-hero-mesh: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,212,255,0.12) 0%, transparent 70%),
                    radial-gradient(ellipse 60% 40% at 80% 50%, rgba(124,58,237,0.08) 0%, transparent 60%),
                    radial-gradient(ellipse 40% 60% at 20% 80%, rgba(0,255,163,0.06) 0%, transparent 60%);
  --grad-card:     linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
}

@media (max-width: 768px) {
  :root {
    --text-hero: clamp(32px, 8vw, 52px);
    --s24: 64px;
    --s20: 56px;
    --s16: 48px;
  }
}