@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Work+Sans:wght@100;300;400;600;800&display=swap');

/* ============================================================
   THEME VARIABLES (dark/light) — no tocar la lógica de main.js
   ============================================================ */
:root {
    --bg-primary: #1e2326;
    --bg-primary-rgb: 30, 35, 38;
    --bg-secondary: #252A2E;
    --bg-secondary-rgb: 37, 42, 46;
    --text-primary: #ffffff;
    --text-secondary: #dddddd;
    --accent: #ff299c;
    --accent-rgb: 255, 41, 156;
    --accent-2: #8b5cf6;
    --accent-2-rgb: 139, 92, 246;
    --border-color: rgba(255, 255, 255, 0.8);
    --shadow-color: rgba(0, 0, 0, 0.3);
    --glass-bg: rgba(255, 255, 255, 0.045);
    --glass-border: rgba(255, 255, 255, 0.1);
    --dot-color: rgba(255, 255, 255, 0.09);
    color-scheme: dark;
}

:root[data-theme="light"] {
    --bg-primary: #f4f4f7;
    --bg-primary-rgb: 244, 244, 247;
    --bg-secondary: #ffffff;
    --bg-secondary-rgb: 255, 255, 255;
    --text-primary: #1e2326;
    --text-secondary: #4a4a4a;
    --accent: #d6127c;
    --accent-rgb: 214, 18, 124;
    --accent-2: #7c3aed;
    --accent-2-rgb: 124, 58, 237;
    --border-color: rgba(30, 35, 38, 0.5);
    --shadow-color: rgba(0, 0, 0, 0.12);
    --glass-bg: rgba(255, 255, 255, 0.6);
    --glass-border: rgba(30, 35, 38, 0.08);
    --dot-color: rgba(30, 35, 38, 0.08);
    color-scheme: light;
}

/* Tokens de diseño (no dependen del tema) */
:root {
    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-sm: 10px;
    --radius-pill: 999px;
    --max: 1500px;
    --pad: clamp(20px, 5vw, 90px);
    --font-display: 'Space Grotesk', 'Work Sans', sans-serif;
    --font-body: 'Work Sans', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}