/* ==========================================================================
   TOKENS DE DISEÑO — Farmy Academy
   Marca paraguas con dos escuelas. Los componentes consumen SIEMPRE variables
   semánticas (--fondo, --superficie, --texto, --acento…), nunca colores fijos.
   Escuela: [data-escuela="tech" | "creativa"]
   Tema:    [data-tema="claro" | "oscuro"]
   ========================================================================== */

:root {
    /* Tipografía */
    --fuente-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fuente-titulo: var(--fuente-base);
    --fuente-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --peso-titulo: 800;
    --transformacion-titulo: none;
    --espaciado-titulo: -0.03em;

    /* Escala de espaciado (4px base) */
    --esp-1: 0.25rem;
    --esp-2: 0.5rem;
    --esp-3: 0.75rem;
    --esp-4: 1rem;
    --esp-5: 1.5rem;
    --esp-6: 2rem;
    --esp-7: 3rem;
    --esp-8: 4rem;
    --esp-9: 6rem;
    --esp-10: 8rem;

    /* Radios */
    --radio-sm: 8px;
    --radio: 14px;
    --radio-lg: 24px;
    --radio-pill: 999px;

    /* Movimiento */
    --transicion: 180ms cubic-bezier(0.2, 0.7, 0.3, 1);

    /* Ancho de contenido */
    --ancho-contenedor: 1180px;
    --ancho-lectura: 760px;

    /* Estados */
    --exito: #177245;
    --exito-suave: #e6f5ec;
    --peligro: #b42318;
    --peligro-suave: #fdecea;

    /* Botones (tonos rojos de marca) */
    --boton-primario: #d92d20;
    --boton-primario-hover: #b42318;
    --boton-primario-contraste: #ffffff;
    --boton-primario-sombra: rgba(217, 45, 32, 0.34);

    /* Escala tipográfica fluida */
    --texto-xs: 0.78rem;
    --texto-sm: 0.875rem;
    --texto-base: 1rem;
    --texto-lg: clamp(1.06rem, 0.4vw + 0.98rem, 1.18rem);
    --texto-xl: clamp(1.3rem, 1vw + 1.05rem, 1.6rem);
    --texto-2xl: clamp(1.6rem, 1.6vw + 1.15rem, 2.2rem);
    --texto-3xl: clamp(2rem, 3vw + 1.2rem, 3.2rem);
    --texto-hero: clamp(2.5rem, 4.6vw + 1rem, 3.9rem);
}

/* --------------------------------------------------------------------------
   Escuela Tech & IA — estética SaaS/B2B limpia, acento índigo-violeta
   La paleta aplica a cualquier elemento con data-escuela (no sólo <html>),
   lo que permite previsualizar ambas escuelas en una misma página.
   -------------------------------------------------------------------------- */
[data-escuela="tech"] {
    --acento: #667eea;
    --acento-fuerte: #4c51bf;
    --acento-suave: #ecefff;
    --acento-contraste: #ffffff;
    --fondo: #f6f7fb;
    --fondo-alterno: #ffffff;
    --superficie: #ffffff;
    --superficie-2: #eef1f8;
    --borde: #e1e5f0;
    --texto: #101528;
    --texto-suave: #5a6178;
    --texto-tenue: #7f8699;
    --sombra: 0 24px 60px -28px rgba(16, 21, 40, 0.28);
    --sombra-suave: 0 10px 30px -18px rgba(16, 21, 40, 0.22);
    --fondo-hero: radial-gradient(1200px 600px at 78% -10%, #e4e9ff 0%, rgba(246, 247, 251, 0) 60%);
}

html[data-escuela="tech"][data-tema="oscuro"],
html[data-tema="oscuro"] [data-escuela="tech"] {
    --acento: #8b9bff;
    --acento-fuerte: #667eea;
    --acento-suave: #1b2140;
    --acento-contraste: #0a0e1c;
    --fondo: #0a0c14;
    --fondo-alterno: #0e1120;
    --superficie: #111527;
    --superficie-2: #161b30;
    --borde: #232a45;
    --texto: #eef1fb;
    --texto-suave: #a5adc6;
    --texto-tenue: #8790ab;
    --sombra: 0 30px 70px -30px rgba(0, 0, 0, 0.65);
    --sombra-suave: 0 14px 36px -20px rgba(0, 0, 0, 0.5);
    --fondo-hero: radial-gradient(1100px 560px at 78% -10%, #1a2350 0%, rgba(10, 12, 20, 0) 62%);
}

/* --------------------------------------------------------------------------
   Escuela Creativa — estética cinematográfica, títulos enormes en MAYÚSCULAS
   Por defecto es oscura; el tema claro es cálido y de alto contraste.
   -------------------------------------------------------------------------- */
html[data-escuela="creativa"],
[data-escuela="creativa"] {
    --acento: #ff6b35;
    --acento-fuerte: #ff8a5c;
    --acento-suave: #2a1510;
    --acento-contraste: #120603;
    --fondo: #050505;
    --fondo-alterno: #0b0b0d;
    --superficie: #101013;
    --superficie-2: #16161a;
    --borde: #26262c;
    --texto: #f5f2ec;
    --texto-suave: #b3aea6;
    --texto-tenue: #8d887f;
    --sombra: 0 34px 80px -34px rgba(0, 0, 0, 0.9);
    --sombra-suave: 0 16px 40px -24px rgba(0, 0, 0, 0.75);
    --fuente-titulo: "Anton", "Archivo Black", Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif;
    --peso-titulo: 400;
    --transformacion-titulo: uppercase;
    --espaciado-titulo: 0.01em;
    --fondo-hero: radial-gradient(1100px 620px at 82% -8%, #2a1109 0%, rgba(5, 5, 5, 0) 58%);
}

html[data-escuela="creativa"][data-tema="claro"],
html[data-tema="claro"] [data-escuela="creativa"] {
    --acento: #d4501f;
    --acento-fuerte: #b83c10;
    --acento-suave: #fbe4d9;
    --acento-contraste: #ffffff;
    --fondo: #f6f2ea;
    --fondo-alterno: #fdfaf4;
    --superficie: #ffffff;
    --superficie-2: #f1eae0;
    --borde: #e3d9cb;
    --texto: #14110d;
    --texto-suave: #5e564b;
    --texto-tenue: #7d7468;
    --sombra: 0 26px 60px -30px rgba(20, 17, 13, 0.35);
    --sombra-suave: 0 12px 30px -20px rgba(20, 17, 13, 0.28);
    --fondo-hero: radial-gradient(1000px 520px at 82% -10%, #f7ddcf 0%, rgba(246, 242, 234, 0) 60%);
}

/* Respeta la preferencia del sistema cuando no hay elección guardada.
   El script del layout fija data-tema antes del primer pintado. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transicion: 0ms;
    }
}

/* Controles nativos (inputs, scrollbars) coherentes con el tema. */
html[data-tema="claro"] {
    color-scheme: light;
}

html[data-tema="oscuro"] {
    color-scheme: dark;
    --exito: #7ee2a8;
    --exito-suave: rgba(34, 197, 94, 0.14);
    --peligro: #ffb4ab;
    --peligro-suave: rgba(239, 68, 68, 0.16);
}