/*
 * Tokens de diseño — Automatika Digital
 *
 * Paleta derivada del logotipo oficial (Resources/logos/). Colores exactos
 * extraídos del archivo: cian #00F8FC, magenta #FB01D3, violeta #7B00FB y
 * fondo índigo profundo.
 *
 * DIRECCIÓN OSCURA. El sitio no tiene secciones ni paneles claros. Se usan
 * exactamente TRES niveles de superficie; la jerarquía adicional se resuelve
 * con borde, no con un cuarto tono. Con fondos oscuros escalonados el margen
 * de luminancia entre niveles es mínimo y más niveles resultan
 * indistinguibles en pantallas mal calibradas o con brillo bajo.
 *
 * Los tres colores de marca son neón: legibles sobre oscuro, ilegibles como
 * texto sobre claro (el cian puro da 1.33:1 contra blanco). Las variantes
 * '--*-on-light' se conservan para superficies claras excepcionales.
 *
 * Disciplina de acento: UN SOLO foco de cian por pantalla visible — el CTA o
 * el punto focal del visual, no ambos. Divisores, eyebrows y marcas de
 * verificación usan lavanda, o magenta cuando el ámbito es industrial.
 *
 * Esta es la fuente única de color: no incrustar valores hexadecimales en el
 * resto de los archivos CSS.
 */
:root {
    /* Superficies — solo tres niveles.
       La separación entre niveles consecutivos es de apenas 1.09:1: perceptible
       pero insuficiente por sí sola, por eso cada tarjeta y panel lleva borde.
       El techo del nivel más claro lo fija el magenta usado como texto: con
       #211a60 caería a 4.38:1, bajo el mínimo AA. No aclarar más surface-2. */
    --c-surface-0: #0a0729;
    /* base: apertura, navegación, cierre */
    --c-surface-1: #140f42;
    /* sección alterna */
    --c-surface-2: #1d1557;
    /* tarjeta y panel */

    --c-line: rgba(255, 255, 255, 0.12);
    --c-line-strong: rgba(255, 255, 255, 0.22);

    /* Texto sobre oscuro */
    --c-on-dark: #ffffff;
    --c-on-dark-soft: #e6e4f2;
    --c-on-dark-muted: #c9c7de;

    /* Acento primario — cian de marca. Reservado para acción y foco. */
    --c-accent: #00f8fc;
    --c-accent-hover: #00d6da;
    --c-accent-soft: rgba(0, 248, 252, 0.12);
    --c-on-accent: #0a0729;

    /* Acento secundario — magenta de marca; distingue el ámbito industrial */
    --c-secondary: #fb01d3;
    --c-secondary-soft: rgba(251, 1, 211, 0.14);

    /* Violeta de marca: solo decorativo (profundidad ambiental), nunca texto */
    --c-violet: #7b00fb;
    --c-violet-soft: rgba(123, 0, 251, 0.16);

    /* Variantes para superficie clara — excepciones puntuales */
    --c-accent-on-light: #066a70;
    --c-secondary-on-light: #b0008f;
    --c-white: #ffffff;

    /* Estados de formulario, calibrados contra superficie oscura */
    --c-success: #57e08a;
    --c-error: #ff8a9c;

    /* Tipografía: pila del sistema. La CSP solo permite fuentes de origen propio. */
    --font-titles: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-body: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* Layout */
    --header-h: 80px;
    /* Tamaño del glifo de marca en header y pie. El header mide 80px, así que
       este valor no debe pasar de ~64px sin dejar el logotipo sin aire. */
    --brand-mark: 62px;
    --brand-mark-sm: 48px;
    --section-pad-y: 84px;
    --section-pad-x: 8%;
    --content-max: 1200px;
    --radius: 8px;
    --shadow-card: 0 6px 20px rgba(0, 0, 0, 0.28);
    --shadow-card-hover: 0 12px 30px rgba(0, 0, 0, 0.40);

    /* Alias heredados — se conservan para no romper reglas aún no migradas */
    --c-dark: var(--c-surface-0);
    --c-dark-2: var(--c-surface-2);
    --c-dark-line: var(--c-line);
    --c-accent-on-dark: var(--c-accent);
    --c-secondary-on-dark: var(--c-secondary);
    --c-light: var(--c-surface-1);
    --c-border: var(--c-line);
    --c-heading: var(--c-on-dark);
    --c-text: var(--c-on-dark-soft);
    --c-muted: var(--c-on-dark-muted);
}