/*
 * Paleta y tokens de diseño. Todo el sitio lee de estas custom properties,
 * así que cambiar el theme es cambiar valores aquí, no tocar cada componente.
 * Oscuro (casi negro) es el tema por defecto; [data-theme="light"] lo sobreescribe.
 */

:root {
    /* Tema oscuro (default) */
    --bg: #05070a;
    --bg-elevated: #0b0f14;
    --bg-elevated-2: #10161d;
    --border: #1c242e;
    --text: #e9edf1;
    --text-muted: #8a97a3;
    --text-dim: #5b6773;

    --accent: #22d3ee;
    --accent-strong: #67e8f9;
    --accent-contrast: #05070a;
    --accent-soft: rgba(34, 211, 238, 0.12);

    --danger: #f87171;
    --success: #34d399;

    --shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6);
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;

    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --container-w: 1120px;
    --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Tamaño del neon "de noche": chico. El modo día lo agranda (ver abajo). */
    --glow-hero-size: 60vw;
    --glow-hero-max: 700px;
    --glow-hero-blur: 10px;
    --glow-logo-width: min(90%, 420px);
    --glow-logo-blur: 8px;
    --glow-symbol-2: drop-shadow(0 0 0 transparent);
    --glow-marker-2: 0 0 0 transparent;
}

/*
 * El modo "día" también es negro (a propósito, no es un descuido): mismo
 * fondo oscuro que el modo noche, para que nunca haya blanco en el sitio.
 */
:root[data-theme="light"] {
    --bg: #05070a;
    --bg-elevated: #0b0f14;
    --bg-elevated-2: #10161d;
    --border: #1c242e;
    --text: #e9edf1;
    --text-muted: #8a97a3;
    --text-dim: #5b6773;

    --accent: #22d3ee;
    --accent-strong: #67e8f9;
    --accent-contrast: #05070a;
    --accent-soft: rgba(34, 211, 238, 0.12);

    --shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6);

    /* De día el neon es más grande */
    --glow-hero-size: 85vw;
    --glow-hero-max: 950px;
    --glow-hero-blur: 18px;
    --glow-logo-width: min(110%, 560px);
    --glow-logo-blur: 16px;
    --glow-symbol-2: drop-shadow(0 0 42px var(--accent-soft));
    --glow-marker-2: 0 0 24px 6px var(--accent-soft);
}