/**
 * AG — tokens de diseño: la única fuente de color, tipografía, espacio y movimiento
 * para el sitio público (site.css) y el panel (admin.css). Esos archivos solo
 * definen alias hacia estos valores; no declaran colores propios.
 *
 * Transparencias: cada color con alfa tiene su canal RGB (`--ag-*-rgb`) para usar
 * `rgb(var(--ag-gold-rgb) / 0.12)` en lugar de un rgba() suelto.
 */

:root {
    color-scheme: dark;

    /* ── Primitivos de marca (logo AG: oro → ámbar, con mechas magenta/violeta) ── */
    --ag-black:          #1a1a1a;
    --ag-black-deep:     #111111;
    --ag-gray-900:       #262626;
    --ag-gray-800:       #2d2d2d;
    --ag-gray-700:       #404040;
    --ag-gray-600:       #4b5563;
    --ag-gray-500:       #737983;
    --ag-gray-300:       #c4c7cd;
    --ag-gray-100:       #f5f5f5;
    --ag-white:          #ffffff;

    --ag-gold:           #d4af37;
    --ag-gold-light:     #e6ca70;
    --ag-gold-strong:    #e8c85f;
    --ag-gold-bright:    #f1d777;
    --ag-gold-deep:      #b8902e;
    --ag-amber:          #f39a1e;
    --ag-magenta:        #e0218a;
    --ag-violet:         #8b2fc9;

    --ag-white-rgb:       255 255 255;
    --ag-black-rgb:       0 0 0;
    --ag-gold-rgb:        212 175 55;
    --ag-gold-strong-rgb: 232 200 95;
    --ag-cream-rgb:       238 220 166;

    /* Degradado de marca: solo para acentos pequeños (líneas, bordes), nunca texto. */
    --ag-gradient-brand: linear-gradient(90deg, var(--ag-gold-strong), var(--ag-amber) 45%, var(--ag-magenta) 75%, var(--ag-violet));
    --ag-gradient-gold:  linear-gradient(135deg, var(--ag-gold-bright), var(--ag-gold) 55%, var(--ag-amber));

    /* ── Estado (pensados para fondo oscuro: contraste AA sobre --ag-bg) ── */
    --ag-success:        #63d99d;
    --ag-success-strong: #82e9b5;
    --ag-warning:        #f5c56f;
    --ag-warning-strong: #ffd88b;
    --ag-danger:         #ff8b86;
    --ag-danger-strong:  #ffaaa6;
    --ag-info:           #8ec7ff;
    --ag-info-strong:    #a7d4ff;
    --ag-neutral-soft:   #d2bbff;

    --ag-success-rgb:    99 217 157;
    --ag-warning-rgb:    245 197 111;
    --ag-danger-rgb:     255 139 134;
    --ag-info-rgb:       142 199 255;
    --ag-violet-soft-rgb: 196 167 255;

    /* ── Superficies (tema oscuro) ── */
    --ag-bg:             var(--ag-black-deep);
    --ag-bg-rgb:         17 17 17;
    --ag-bg-soft:        #171714;
    --ag-bg-soft-rgb:    23 23 20;
    --ag-surface:        #1d1d19;
    --ag-surface-rgb:    29 29 25;
    --ag-surface-alt:    #25251f;
    --ag-surface-alt-rgb: 37 37 31;
    --ag-surface-hover:  #2c2b24;
    --ag-field:          var(--ag-gray-800);
    --ag-border:         rgb(var(--ag-cream-rgb) / 0.16);
    --ag-border-strong:  rgb(var(--ag-cream-rgb) / 0.3);
    --ag-border-subtle:  rgb(var(--ag-white-rgb) / 0.12);

    /* ── Texto ── */
    --ag-text:           #f8f6ee;
    --ag-text-muted:     #c4c0b4;
    --ag-text-muted-rgb: 196 192 180;
    --ag-text-subtle:    #9a958a;
    --ag-accent:         var(--ag-gold-strong);
    --ag-accent-ink:     #171408;

    /* ── Tipografía (fuentes del sistema: 0 KB) ── */
    --ag-font-body:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Aptos, Roboto, sans-serif;
    --ag-font-display: Georgia, "Times New Roman", serif;
    --ag-fs-xs:   0.75rem;
    --ag-fs-sm:   0.875rem;
    --ag-fs-base: clamp(1rem, 0.97rem + 0.12vw, 1.075rem);
    --ag-fs-lg:   clamp(1.08rem, 1.01rem + 0.28vw, 1.25rem);
    --ag-fs-xl:   clamp(1.25rem, 1.13rem + 0.48vw, 1.55rem);
    --ag-fs-2xl:  clamp(1.55rem, 1.29rem + 1vw, 2.15rem);
    --ag-fs-3xl:  clamp(2rem, 1.55rem + 1.75vw, 3.1rem);
    --ag-fs-hero: clamp(2.55rem, 1.75rem + 3.15vw, 5rem);
    --ag-lh-tight: 1.12;
    --ag-lh-body:  1.6;

    /* ── Espaciado (rejilla de 4 px; el número = múltiplos de 4 px) ── */
    --ag-space-1:  0.25rem;
    --ag-space-2:  0.5rem;
    --ag-space-3:  0.75rem;
    --ag-space-4:  1rem;
    --ag-space-5:  1.25rem;
    --ag-space-6:  1.5rem;
    --ag-space-8:  2rem;
    --ag-space-10: 2.5rem;
    --ag-space-12: 3rem;
    --ag-space-16: 4rem;
    --ag-space-20: 5rem;
    --ag-space-24: 6rem;

    /* ── Radios, sombras, capas ── */
    --ag-radius-xs:   0.25rem;
    --ag-radius-sm:   0.5rem;
    --ag-radius-md:   0.75rem;
    --ag-radius-lg:   1rem;
    --ag-radius-xl:   1.25rem;
    --ag-radius-full: 9999px;
    --ag-shadow-sm: 0 1px 2px rgb(var(--ag-black-rgb) / 0.14);
    --ag-shadow-md: 0 12px 30px rgb(var(--ag-black-rgb) / 0.18);
    --ag-shadow-lg: 0 22px 60px rgb(var(--ag-black-rgb) / 0.3);
    --ag-z-header: 100;
    --ag-z-overlay: 200;
    --ag-z-skip: 1000;

    /* ── Movimiento ── */
    --ag-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ag-dur-fast: 160ms;
    --ag-dur: 300ms;

    /* ── Medidas de layout ── */
    --ag-header-height: 4.75rem;
    --ag-container: 75rem;
    --ag-tap: 2.75rem;
}

/* Foco visible y consistente en toda la app (WCAG 2.4.7 / 2.4.11) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--ag-accent);
    outline-offset: 2px;
}

/* Objetivo táctil mínimo en pantallas táctiles (WCAG 2.5.8) */
@media (pointer: coarse) {
    :where(button, [role="button"], a.btn, a.button, input[type="submit"], input[type="button"]) {
        min-height: var(--ag-tap);
    }
}

/* Listas desplegables: el campo tiene fondo semitransparente y Windows pinta las opciones
   sobre blanco con el texto claro heredado (casi invisible). Fondo y color explícitos. */
select option,
select optgroup {
    background-color: var(--ag-surface);
    color: var(--ag-text);
}

select option:disabled {
    color: var(--ag-text-subtle);
}

/* Utilidad compartida: texto solo para lectores de pantalla. */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Respeta la preferencia de movimiento reducido en todo el proyecto */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}