/* Design Tokens - Auto-generated */
/* Do not edit directly - modify tokens.json instead */

/* === PRIMITIVES === */
:root {
  --primitive-color-navy-800: #17171A;
  --primitive-color-navy-900: #111113;
  --primitive-color-navy-950: #0C0C0C;
  --primitive-color-cyan-400: #33B2E5;
  --primitive-color-cyan-500: #009FDF;
  --primitive-color-cyan-600: #007AAB;
  --primitive-color-cyan-700: #00668F;
  --primitive-color-sky-300: #A0C4E2;
  --primitive-color-slate-50: #F6F9FC;
  --primitive-color-slate-100: #EEF3F9;
  --primitive-color-slate-200: #E2E8F0;
  --primitive-color-slate-250: #CBD5E1;
  --primitive-color-slate-300: #D5DEEA;
  --primitive-color-slate-400: #94A3B8;
  --primitive-color-slate-450: #8593A8;
  --primitive-color-slate-500: #64748B;
  --primitive-color-slate-600: #475569;
  --primitive-color-green-400: #4ADE80;
  --primitive-color-green-600: #16A34A;
  --primitive-color-red-400: #F87171;
  --primitive-color-white: #FFFFFF;
  --primitive-rgb-navy: 12, 12, 12;
  --primitive-rgb-cyan: 0, 159, 223;
  --primitive-rgb-sky: 160, 196, 226;
  --primitive-rgb-white: 255, 255, 255;
  --primitive-rgb-navy-900: 17, 17, 19;
  --primitive-rgb-navy-800: 23, 23, 26;
  --primitive-rgb-black: 0, 0, 0;
  --primitive-space-1: 4px;
  --primitive-space-2: 8px;
  --primitive-space-3: 12px;
  --primitive-space-4: 16px;
  --primitive-space-5: 20px;
  --primitive-space-6: 24px;
  --primitive-space-7: 28px;
  --primitive-space-8: 32px;
  --primitive-space-10: 40px;
  --primitive-space-12: 48px;
  --primitive-space-14: 56px;
  --primitive-space-16: 64px;
  --primitive-space-18: 72px;
  --primitive-space-22: 88px;
  --primitive-space-24: 96px;
  --primitive-space-28: 112px;
  --primitive-radius-sm: 8px;
  --primitive-radius-md: 12px;
  --primitive-radius-lg: 16px;
  --primitive-radius-xl: 20px;
  --primitive-radius-2xl: 24px;
  --primitive-radius-pill: 999px;
  --primitive-font-family-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --primitive-font-family-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --primitive-font-family-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
  --primitive-font-size-xs: 0.75rem;
  --primitive-font-size-sm: 0.85rem;
  --primitive-font-size-md: 0.95rem;
  --primitive-font-size-base: 1rem;
  --primitive-font-size-lg: 1.05rem;
  --primitive-font-size-xl: 1.25rem;
  --primitive-font-size-2xl: 1.4rem;
  --primitive-font-size-stat: clamp(2rem, 3.4vw, 2.75rem);
  --primitive-font-size-h2: clamp(2rem, 3.4vw, 2.75rem);
  --primitive-font-size-h1: clamp(2.5rem, 4.6vw, 4rem);
  --primitive-duration-fast: 200ms;
  --primitive-duration-base: 300ms;
  --primitive-duration-slow: 600ms;
  --primitive-easing-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* === SEMANTIC === */
:root {
  --color-bg: var(--primitive-color-navy-950);
  --color-surface: var(--primitive-color-navy-800);
  --color-surface-alt: var(--primitive-color-navy-900);
  --color-fg: var(--primitive-color-white);
  --color-fg-soft: var(--primitive-color-slate-200);
  --color-fg-body: var(--primitive-color-slate-250);
  --color-fg-muted: var(--primitive-color-slate-400);
  --color-fg-subtle: var(--primitive-color-slate-450);
  --color-border: rgba(var(--primitive-rgb-white), 0.08);
  --color-border-strong: rgba(var(--primitive-rgb-white), 0.2);
  --color-accent: var(--primitive-color-cyan-500);
  --color-accent-hover: var(--primitive-color-cyan-400);
  --color-on-accent: var(--primitive-color-navy-950);
  --color-signal: var(--primitive-color-sky-300);
  --color-icon: var(--primitive-color-sky-300);
  --color-tag-fg: var(--primitive-color-sky-300);
  --color-success: var(--primitive-color-green-400);
  --color-error: var(--primitive-color-red-400);
  --color-glow-border: rgba(var(--primitive-rgb-sky), 0.35);
  --color-spotlight: rgba(var(--primitive-rgb-cyan), 0.12);
  --shadow-card: none;
  --shadow-panel: 0 0 0 1px rgba(var(--primitive-rgb-sky), 0.18), 0 40px 100px -50px rgba(var(--primitive-rgb-cyan), 0.45);
  --shadow-float: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
  --space-section: var(--primitive-space-28);
  --space-card: var(--primitive-space-8);
  --space-gutter: var(--primitive-space-5);
  --font-heading: var(--primitive-font-family-display);
  --font-body: var(--primitive-font-family-sans);
  --font-code: var(--primitive-font-family-mono);
  --motion-ease: var(--primitive-easing-out-expo);
  --motion-fast: var(--primitive-duration-fast);
  --motion-base: var(--primitive-duration-base);
}

/* === COMPONENTS (también en .theme-light para que se recalculen) === */ .theme-light,
:root {
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --card-radius: var(--primitive-radius-xl);
  --card-padding: var(--space-card);
  --card-shadow: var(--shadow-card);
  --icon-tile-size: var(--primitive-space-14);
  --icon-tile-radius: 14px;
  --icon-tile-bg: rgba(var(--primitive-rgb-cyan), 0.1);
  --icon-tile-border: rgba(var(--primitive-rgb-cyan), 0.25);
  --icon-tile-fg: var(--color-icon);
  --chip-bg: var(--color-surface-alt);
  --chip-border: var(--color-border);
  --chip-fg: var(--color-fg-soft);
  --chip-radius: var(--primitive-radius-pill);
  --tag-bg: rgba(var(--primitive-rgb-cyan), 0.07);
  --tag-border: rgba(var(--primitive-rgb-cyan), 0.2);
  --tag-fg: var(--color-tag-fg);
  --panel-bg: var(--primitive-color-slate-100);
  --panel-radius: clamp(24px, 3vw, 40px);
  --panel-inset: clamp(8px, 1.6vw, 24px);
  --panel-shadow: var(--shadow-panel);
  --button-bg: var(--color-accent);
  --button-bg-hover: var(--color-accent-hover);
  --button-fg: var(--color-on-accent);
  --button-radius: var(--primitive-radius-pill);
  --terminal-bg: var(--primitive-color-navy-950);
  --terminal-fg: var(--primitive-color-slate-200);
  --terminal-ok: var(--primitive-color-green-400);
}

/* === TEMA CLARO (paneles .theme-light) === */
.theme-light {
  --color-bg: var(--primitive-color-slate-100);
  --color-surface: var(--primitive-color-white);
  --color-surface-alt: var(--primitive-color-slate-50);
  --color-fg: var(--primitive-color-navy-950);
  --color-fg-soft: var(--primitive-color-navy-950);
  --color-fg-muted: var(--primitive-color-slate-600);
  --color-fg-subtle: var(--primitive-color-slate-500);
  --color-border: rgba(var(--primitive-rgb-navy), 0.08);
  --color-border-strong: var(--primitive-color-slate-300);
  --color-signal: var(--primitive-color-cyan-600);
  --color-icon: var(--primitive-color-cyan-600);
  --color-tag-fg: var(--primitive-color-cyan-700);
  --color-success: var(--primitive-color-green-600);
  --color-glow-border: rgba(var(--primitive-rgb-cyan), 0.45);
  --color-spotlight: rgba(var(--primitive-rgb-cyan), 0.07);
  --shadow-card: 0 1px 2px rgba(var(--primitive-rgb-navy), 0.05), 0 16px 40px -24px rgba(var(--primitive-rgb-navy), 0.28);
}

/* === PUENTE CON NOMBRES ANTIGUOS ===
   styles.css y enhancements.css usaban sus propias variables. Aquí apuntan a los tokens
   semánticos, así todo el CSS existente pasa a usar el sistema sin reescribirlo.
   Se declaran también en .theme-light para que se recalculen dentro de los paneles claros. */

/* Marca: valores fijos que no cambian con el tema */
:root {
    --stronix-navy: var(--primitive-color-navy-950);
    --stronix-sky: var(--primitive-color-sky-300);
    --stronix-cyan: var(--primitive-color-cyan-500);
    --stronix-bg-light: var(--primitive-color-slate-50);
    --stronix-border: var(--primitive-color-slate-200);
    --stronix-navy-rgb: var(--primitive-rgb-navy);
    --stronix-cyan-rgb: var(--primitive-rgb-cyan);
    --stronix-sky-rgb: var(--primitive-rgb-sky);

    --primary: var(--primitive-color-cyan-500);
    --primary-light: var(--primitive-color-cyan-400);
    --primary-dark: var(--primitive-color-cyan-600);
    --secondary: var(--primitive-color-sky-300);
    --dark-bg: var(--primitive-color-navy-950);
    --main-bg-color: var(--primitive-color-navy-950);
    --text-main: var(--primitive-color-white);

    --font-mono: var(--font-code);
    --ease-out-expo: var(--motion-ease);
    --sheet-bg: var(--panel-bg);
}

/* Semánticos: cambian dentro de .theme-light */
:root,
.theme-light {
    --surface-1: var(--color-surface);
    --surface-2: var(--color-surface-alt);
    --hairline: var(--color-border);
    --text-secondary: var(--color-fg-muted);
    --text-tertiary: var(--color-fg-subtle);
    --accent: var(--color-accent);
    --accent-hover: var(--color-accent-hover);
    --on-accent: var(--color-on-accent);
    --signal: var(--color-signal);
    --primary-neon: var(--color-signal);
    --section-space: var(--space-section);
    --glow-border: var(--color-glow-border);
    --spotlight: var(--color-spotlight);
    --light-shadow: var(--shadow-card);
}

/* Separación entre secciones adaptable (el generador no admite media queries) */
@media (max-width: 992px) {
    :root,
    .theme-light {
        --space-section: var(--primitive-space-22);
    }
}

@media (max-width: 768px) {
    :root,
    .theme-light {
        --space-section: var(--primitive-space-18);
    }
}