/* ===== FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Montserrat:wght@400;600;700;800&family=Space+Mono:wght@400;700&display=swap');

/* ===== DARK MODE (DEFAULT) ===== */
:root,
[data-theme="dark"] {
  /* Background */
  --bg-base: #080c12;
  --bg-panel: rgba(12, 18, 28, 0.85);
  --bg-glass: rgba(255, 255, 255, 0.04);
  --border-glass: rgba(255, 255, 255, 0.08);

  /* Neon Colors */
  --cyan: #00e5ff;
  --cyan-dim: rgba(0, 229, 255, 0.15);
  --emerald: #00ffa3;
  --emerald-dim: rgba(0, 255, 163, 0.12);
  --red: #ff3b6b;
  --red-dim: rgba(255, 59, 107, 0.15);
  --amber: #ffb020;
  --amber-dim: rgba(255, 176, 32, 0.15);

  /* Text */
  --text-primary: #f5f5ff;
  --text-muted: rgba(245, 245, 255, 0.65);
  --text-dim: rgba(245, 245, 255, 0.45);

  /* Sidebar */
  --sidebar-bg: rgba(8, 12, 18, 0.92);

  /* Gradients (Dark Mode Background Decoration) */
  --gradient-decoration:
    radial-gradient(ellipse 80% 60% at 10% 10%, rgba(0, 229, 255, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 80%, rgba(0, 255, 163, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(255, 59, 107, 0.03) 0%, transparent 60%);
}

/* ===== LIGHT MODE ===== */
[data-theme="light"] {
  /* Background */
  --bg-base: #f5f7fa;
  --bg-panel: rgba(255, 255, 255, 0.95);
  --bg-glass: rgba(255, 255, 255, 0.7);
  --border-glass: rgba(0, 0, 0, 0.06);

  /* Neon Colors - Adjusted for Light Mode */
  --cyan: #0088cc;
  --cyan-dim: rgba(0, 136, 204, 0.12);
  --emerald: #00a86b;
  --emerald-dim: rgba(0, 168, 107, 0.1);
  --red: #d63447;
  --red-dim: rgba(214, 52, 71, 0.12);
  --amber: #ff9800;
  --amber-dim: rgba(255, 152, 0, 0.12);

  /* Text */
  --text-primary: #1a202c;
  --text-muted: rgba(26, 32, 44, 0.72);
  --text-dim: rgba(26, 32, 44, 0.56);

  /* Sidebar */
  --sidebar-bg: rgba(255, 255, 255, 0.85);

  /* Gradients (Light Mode Background Decoration) */
  --gradient-decoration:
    radial-gradient(ellipse 80% 60% at 10% 10%, rgba(0, 136, 204, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 80%, rgba(0, 168, 107, 0.03) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(214, 52, 71, 0.02) 0%, transparent 60%);
}

/* ===== TYPOGRAPHY ===== */
:root {
  /* Font Families */
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Poppins', sans-serif;
  --font-mono: 'Space Mono', monospace;

  /* Font Sizes */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 13px;
  --font-size-lg: 14px;
  --font-size-xl: 16px;
  --font-size-2xl: 18px;
  --font-size-3xl: 20px;
  --font-size-4xl: 22px;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Letter Spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.12em;
}

/* ===== SPACING ===== */
:root {
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 28px;
}

/* ===== BORDER RADIUS ===== */
:root {
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;
}

/* ===== SHADOWS ===== */
:root {
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.2);
}

/* ===== TRANSITIONS ===== */
:root {
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.35s ease;
}

/* ===== Z-INDEX ===== */
:root {
  --z-sidebar: 100;
  --z-main: 1;
  --z-dropdown: 50;
  --z-modal: 200;
  --z-notification: 300;
  --z-tooltip: 400;
}