/* =========================================
   VARIABLES / THEME
   File: variables.css
========================================= */

:root {
  /* ===========================
     COLORS
  =========================== */
  --color-bg-dark: #0b0b10;
  --color-panel: #101018;
  --color-muted: #9aa0b4;
  --color-accent: #ff0066;
  --color-accent-alt: #6b5cff;
  --color-glass: rgba(255, 255, 255, 0.03);
  --color-neon-shadow: 0 6px 30px rgba(107, 92, 255, 0.12),
    0 0 18px rgba(255, 0, 102, 0.06);
  --color-text: #e8eefc;

  /* ===========================
     LIGHT THEME
  =========================== */
  --light-bg-dark: #e7e9f0;
  --light-panel: #f4f5fa;
  --light-muted: #6c738a;
  --light-accent: #5a4cf5;
  --light-accent-alt: #d86ba9;
  --light-glass: rgba(0, 0, 0, 0.04);
  --light-neon-shadow: 0 6px 24px rgba(90, 76, 245, 0.12),
    0 0 14px rgba(216, 107, 169, 0.08);
  --light-text: #1d2333;

  /* ===========================
     SIZE VARIABLES
  =========================== */
  --radius-base: 14px;
  --radius-small: 8px;
  --max-width: 1200px;
  --font-base: "Inter", system-ui, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  --font-size-base: 16px;
  --font-size-small: 14px;
  --font-size-large: 18px;

  /* ===========================
     BOX SHADOWS / TRANSITIONS
  =========================== */
  --shadow-base: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-hover: 0 12px 26px rgba(107, 92, 255, 0.35),
    0 0 18px rgba(255, 0, 102, 0.22);
  --transition-fast: 0.18s ease;
  --transition-normal: 0.25s ease;
  --transition-smooth: 0.3s ease;

  /* ===========================
     GRID / SPACING
  =========================== */
  --gap-xs: 6px;
  --gap-sm: 12px;
  --gap-md: 18px;
  --gap-lg: 24px;
  --gap-xl: 40px;
}