:root {

    --verde-950: #052e16;
    --verde-900: #14532d;
    --verde-800: #166534;
    --verde-700: #15803d;
    --verde-600: #16a34a;
    --verde-300: #86efac;
    --verde-200: #bbf7d0;
    --verde-100: #dcfce7;
    --verde-50:  #f0fdf4;

    --gris-900: #111827;
    --gris-700: #374151;
    --gris-600: #4b5563;
    --gris-500: #6b7280;
    --gris-400: #9ca3af;
    --gris-300: #d1d5db;
    --gris-200: #e5e7eb;
    --gris-100: #f3f4f6;
    --gris-50:  #f9fafb;
    --blanco:   #fff;

    --texto-fuerte: var(--gris-900);
    --texto-normal: var(--gris-600);
    --texto-debil:  var(--gris-500);

    --exito-fondo: var(--verde-100);
    --exito-texto: var(--verde-800);
    --aviso-fondo: #fef3c7;
    --aviso-borde: #fde68a;
    --aviso-texto: #92400e;
    --error-fondo: #fef2f2;
    --error-borde: #fecaca;
    --error-texto: #b91c1c;
    --oro:         #f59e0b;
    --oro-claro:   #facc15;

    --oro-fondo:     #fffbeb;
    --oro-texto:     #b45309;
    --rojo-600:      #dc2626;
    --verde-brillo:  #4ade80;
    --amarillo-300:  #fde047;
    --gris-800:      #1f2937;

    --texto-xs:   0.75rem;
    --texto-sm:   0.8125rem;
    --texto-md:   0.9375rem;
    --texto-base: 1rem;
    --texto-lg:   1.125rem;
    --texto-xl:   1.25rem;
    --texto-2xl:  1.5rem;
    --texto-3xl:  1.875rem;
    --texto-4xl:  2.5rem;
    --texto-5xl:  3rem;

    --radio-sm:   0.5rem;
    --radio-md:   0.75rem;
    --radio-lg:   1rem;
    --radio-xl:   1.5rem;
    --radio-full: 9999px;

    --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --sombra-md: 0 2px 8px rgba(0, 0, 0, 0.06);
    --sombra-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --sombra-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.35);

    --sombra-oscura: 0 4px 14px rgba(0, 0, 0, 0.28);

    --sombra-marca-sm: 0 2px 8px rgba(22, 101, 52, 0.12);
    --sombra-marca-md: 0 4px 16px rgba(20, 83, 45, 0.08);
    --sombra-marca-lg: 0 10px 30px -12px rgba(20, 83, 45, 0.25);
    --sombra-marca-xl: 0 20px 40px -20px rgba(5, 46, 22, 0.5);

    --sombra-oro: 0 4px 14px rgba(180, 83, 9, 0.18);

    --anillo-foco:  0 0 0 3px rgba(22, 163, 74, 0.35);
    --anillo-error: 0 0 0 3px rgba(220, 38, 38, 0.30);
    --anillo-oro:   0 0 0 3px rgba(250, 204, 21, 0.40);

    --anillo-hoy:   0 0 0 2px rgba(22, 163, 74, 0.18);

    --toque: 2.75rem;

    --paso-rapido: 0.12s ease;
    --paso-normal: 0.15s ease;
}

@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;
    }
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--verde-600);
    outline-offset: 2px;
    border-radius: var(--radio-sm);
}

:where(.cabecera, .franja, .hero, .menu-movil) :where(a, button, [tabindex]):focus-visible {
    outline-color: var(--oro-claro);
}

:where(button, input, select, textarea, a)[disabled],
:where(button, input, select, textarea):disabled,
[aria-disabled='true'] {
    opacity: 0.55;
    filter: grayscale(0.4);
    cursor: not-allowed;
    pointer-events: none;
}

.enviando {
    opacity: 0.7;
    cursor: progress;
    pointer-events: none;
}

.toast-message {
    transition: opacity var(--paso-normal), transform var(--paso-normal);
}

.toast-message.toast-saliendo {
    opacity: 0;

    transform: translateX(1rem);
}