/* ==========================================================================
   Avante UI — tokens
   Único lugar donde se definen colores, radios, sombras y tipografía.
   CSS plano: sirve igual con Tailwind 3 y Tailwind 4.

   Paleta oficial (5 colores de marca):
     #077BA1  cian profundo  — acción primaria / navegación
     #446078  slate          — secundario / títulos y texto fuerte
     #7E8080  gris           — decoración, bordes y texto de apoyo grande
     #FFFFFF  blanco         — superficies
     #BB0808  rojo           — peligro / énfasis

   Tipografía:
     NIREQUN / EXO 2 — display: H1, H2, eslóganes y piezas gráficas. Nunca cuerpo.
     OPEN SANS — lectura: cuerpo, subtítulos, botones, menús, formularios.
   ========================================================================== */

:root {
    color-scheme: light;

    /* --- Marca: paleta oficial ------------------------------------------- */
    --avante-cyan: #077ba1;
    --avante-cyan-hover: #066a8b;
    --avante-cyan-deep: #055a77;
    --avante-cyan-soft: rgba(7, 123, 161, 0.1);

    --avante-slate: #446078;
    --avante-slate-deep: #334a5c;
    --avante-slate-soft: rgba(68, 96, 120, 0.1);

    --avante-gray: #7e8080;
    --avante-gray-soft: #f2f3f3;

    --avante-white: #ffffff;

    --avante-red: #bb0808;
    --avante-red-hover: #9e0707;
    --avante-red-deep: #820505;
    --avante-red-soft: rgba(187, 8, 8, 0.08);
    --avante-red-soft-hover: rgba(187, 8, 8, 0.14);

    /* Alias heredados: mantienen compatibles los repos ya migrados. */
    --avante-blue: var(--avante-cyan);
    --avante-blue-deep: var(--avante-cyan-deep);
    --avante-blue-hover: var(--avante-cyan-hover);

    /* --- Texto ------------------------------------------------------------ */
    --avante-ink: #24333d;
    --avante-text: #2b3b44;
    /* `--avante-gray` (#7e8080) NO llega a 4.5:1 sobre blanco (3.97:1).
       Para texto secundario se usa este gris derivado, que sí cumple AA. */
    --avante-muted: #5c6468;
    --avante-text-inverse: #ffffff;

    /* --- Superficies ------------------------------------------------------ */
    --avante-surface: #ffffff;
    --avante-surface-soft: #f4f6f6;
    --avante-surface-inset: #edf0f0;
    --avante-border: #d6dbdb;
    --avante-border-strong: #b8c0c0;
    /* Velo detrás de drawers y modales (superficie oscura translúcida). */
    --avante-scrim: rgba(14, 26, 32, 0.45);

    /* --- Semánticos de estado (no son paleta de marca) -------------------- */
    --avante-success: #15803d;
    --avante-success-soft: rgba(21, 128, 61, 0.12);
    --avante-warning: #b45309;
    --avante-warning-soft: rgba(180, 83, 9, 0.12);
    --avante-danger: var(--avante-red);
    --avante-danger-soft: var(--avante-red-soft);

    /* --- Forma ------------------------------------------------------------ */
    --avante-radius-panel: 1.5rem;
    --avante-radius-card: 1rem;
    --avante-radius-control: 0.75rem;
    --avante-radius-chip: 9999px;

    /* --- Profundidad ------------------------------------------------------ */
    --avante-shadow: 0 20px 45px -28px rgba(36, 51, 61, 0.45);
    --avante-shadow-card: 0 10px 25px -15px rgba(0, 0, 0, 0.1);
    --avante-shadow-card-hover: 0 24px 44px -28px rgba(36, 51, 61, 0.65);

    /* --- Tipografía -------------------------------------------------------- */
    /* Display (Exo 2 activo / NIREQUN de marca): solo H1/H2 y eslóganes. */
    --avante-font-display: 'Exo 2', 'NIREQUN', 'Open Sans', ui-sans-serif, system-ui,
        -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    /* OPEN SANS: cuerpo, subtítulos, botones, navegación y formularios. */
    --avante-font-body: 'Open Sans', ui-sans-serif, system-ui, -apple-system,
        'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    /* Alias heredado: el cuerpo de texto es Open Sans. */
    --avante-font-sans: var(--avante-font-body);
    --avante-font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro',
        Menlo, Consolas, monospace;
    /* Open Sans está diseñada para leerse a 16 px; no se agranda la raíz. */
    --avante-font-size-root: 100%;
    --avante-display-tracking: 0.01em;

    /* --- Foco -------------------------------------------------------------- */
    --avante-focus: var(--avante-cyan);
    --avante-focus-ring: rgba(7, 123, 161, 0.35);

    /* --- Fondo de página --------------------------------------------------- */
    --avante-bg:
        radial-gradient(circle at top left, rgba(7, 123, 161, 0.12), transparent 28%),
        radial-gradient(circle at top right, rgba(68, 96, 120, 0.14), transparent 32%),
        linear-gradient(135deg, #f1f4f4 0%, #fbfcfc 42%, #eef1f1 100%);
}

.dark {
    color-scheme: dark;

    /* Derivación oscura de la paleta: mismo matiz, luminosidad ajustada
       para mantener contraste AA sobre superficies oscuras. */
    --avante-cyan: #4fb8d8;
    --avante-cyan-hover: #7bcee6;
    --avante-cyan-deep: #2e93b8;
    --avante-cyan-soft: rgba(79, 184, 216, 0.16);

    --avante-slate: #8fa8bc;
    --avante-slate-deep: #b3c6d5;
    --avante-slate-soft: rgba(143, 168, 188, 0.14);

    --avante-gray: #9aa0a0;
    --avante-gray-soft: #1b2a32;

    --avante-white: #ffffff;

    --avante-red: #f26b6b;
    --avante-red-hover: #f58c8c;
    --avante-red-deep: #d94f4f;
    --avante-red-soft: rgba(242, 107, 107, 0.14);
    --avante-red-soft-hover: rgba(242, 107, 107, 0.2);

    --avante-ink: #f2f6f8;
    --avante-text: #e8eef1;
    --avante-muted: #a3b1b8;
    --avante-text-inverse: #0e1a20;

    --avante-surface: #0e1a20;
    --avante-surface-soft: #152730;
    --avante-surface-inset: #112029;
    --avante-border: #2a3f49;
    --avante-border-strong: #3c5663;
    --avante-scrim: rgba(0, 0, 0, 0.6);

    --avante-success: #4ade80;
    --avante-success-soft: rgba(34, 197, 94, 0.16);
    --avante-warning: #fbbf24;
    --avante-warning-soft: rgba(245, 158, 11, 0.16);
    --avante-danger: var(--avante-red);
    --avante-danger-soft: var(--avante-red-soft);

    --avante-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.5);
    --avante-shadow-card: 0 10px 25px -15px rgba(0, 0, 0, 0.45);
    --avante-shadow-card-hover: 0 24px 44px -20px rgba(0, 0, 0, 0.6);

    --avante-focus: #4fb8d8;
    --avante-focus-ring: rgba(79, 184, 216, 0.4);

    --avante-bg:
        radial-gradient(circle at top left, rgba(79, 184, 216, 0.12), transparent 30%),
        radial-gradient(circle at top right, rgba(143, 168, 188, 0.1), transparent 35%),
        linear-gradient(135deg, #071217 0%, #0e1a20 45%, #152730 100%);
}