/* =========================================================
   CERNUNNOS BASE · variables.css
   Tokens de diseño. Un tema hijo solo necesita re-declarar
   las variables que quiera cambiar (ver cernunnos-demo-thecutfactory).
   ========================================================= */
:root {
    /* COLORES PRINCIPALES */
    --color-primary: #001F3F;       /* Azul tech oscuro */
    --color-secondary: #39FF14;     /* Verde neon */
    --color-bg: #FFFFFF;            /* Fondo de página */
    --color-dark: #0a0a0a;          /* Negro muy oscuro */
    --color-text: #1a1a1a;          /* Texto principal */
    --color-text-light: #666666;    /* Texto secundario */

    /* SUPERFICIES Y TEMA (knobs para temas hijos) ----------
       Se usan en components.css en lugar de valores fijos,
       para que un hijo pueda invertir claro->oscuro. */
    --color-surface: #f8f9fa;       /* Fondo de secciones alternas */
    --color-border: #001F3F;        /* Borde por defecto de las cards */
    --color-heading: #001F3F;       /* Títulos sobre fondo claro */
    --color-hero-text: #ffffff;     /* Texto sobre el hero oscuro */
    --hero-gradient-start: #001F3F; /* Inicio del degradado del hero */
    --hero-gradient-end: #001a2e;   /* Fin del degradado del hero */

    /* TIPOGRAFÍA */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-size-h1: 56px;
    --font-size-h2: 40px;
    --font-size-h3: 28px;
    --font-size-body: 16px;
    --line-height-heading: 1.2;
    --line-height-body: 1.6;

    /* ESPACIADO */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 40px;
    --spacing-xl: 60px;

    /* EFECTOS */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --shadow-sm: 0 2px 8px rgba(0, 31, 63, 0.1);
    --shadow-md: 0 8px 24px rgba(0, 31, 63, 0.15);
    --shadow-neon: 0 0 20px rgba(57, 255, 20, 0.3);
    --border-radius: 8px;
}

@media (max-width: 768px) {
    :root {
        --font-size-h1: 40px;
        --font-size-h2: 28px;
        --font-size-h3: 20px;
        --font-size-body: 14px;
    }
}