@import 'tailwindcss';
@import '@fontsource-variable/archivo/wdth.css';
@import './shared/rich-content.css';
@plugin '@tailwindcss/typography';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';

/* Modo oscuro por atributo (lo controla resources/js/site/theme.js), no por
   la preferencia del sistema: el usuario puede elegir y se recuerda. */
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

/* Identidad B · Andino contemporáneo (ver AGENTS.md). Tokens semánticos:
   el mismo nombre cambia de valor según el tema. */
:root {
    --bg: #ffffff;
    --surface: #eef2f7;
    --line: #d8dfea;
    --ink: #0f1d36;
    --muted: #4f5d75;
    --field: #122b57;
    --link: #22498f;
    --accent: #f28c28;
    --accent-ink: #1b1206;
    --accent-text: #b35a0c;
    --green: #5a9a46;
    --green-text: #3d7a2c;
}

[data-theme='dark'] {
    --bg: #0b1426;
    --surface: #111f38;
    --line: #223457;
    --ink: #eaf0f8;
    --muted: #9eadc6;
    --field: #07122a;
    --link: #8fb0ee;
    --accent-text: #f5a55a;
    --green-text: #8fd07a;
}

@theme inline {
    --font-sans: 'Archivo Variable', ui-sans-serif, system-ui, sans-serif;
    --color-bg: var(--bg);
    --color-surface: var(--surface);
    --color-line: var(--line);
    --color-ink: var(--ink);
    --color-muted: var(--muted);
    --color-field: var(--field);
    --color-link: var(--link);
    --color-accent: var(--accent);
    --color-accent-ink: var(--accent-ink);
    --color-accent-text: var(--accent-text);
    --color-green: var(--green);
    --color-green-text: var(--green-text);
    /* Texto claro sobre el campo azul noche, que conserva su color en ambos temas. */
    --color-on-field: #d5def0;
}

@layer base {
    html { color-scheme: light; }
    html[data-theme='dark'] { color-scheme: dark; }
    :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

    /* Los buscadores usan una X propia, grande y visible: la nativa es
       diminuta y toma el color del tema (en claro se perdía sobre el azul).
       display:none es lo que Chrome/Safari respetan en este pseudo-elemento
       (el compilador quita el prefijo -webkit- de appearance). */
    input[type='search']::-webkit-search-cancel-button {
        display: none;
    }
}

/* Curvas de nivel de la portada: se "dibujan" una vez al cargar. */
@media (prefers-reduced-motion: no-preference) {
    [data-contours] path {
        stroke-dasharray: 1400;
        stroke-dashoffset: 1400;
        animation: contour-draw 2.4s ease-out forwards;
    }
}

@keyframes contour-draw { to { stroke-dashoffset: 0; } }

/* Portada con banners. Sin JavaScript solo existe la primera diapositiva
   (las demás llevan «hidden»); con él todas comparten celda y se funden. */
[data-hero-banners][data-enhanced] .hero-slide {
    transition: opacity .5s ease, visibility .5s;
}
[data-hero-banners][data-enhanced] .hero-slide:not([data-active]) {
    visibility: hidden;
    opacity: 0;
}
.hero-dot-fill { transform: scaleX(0); }
[data-hero-dot][aria-current] .hero-dot-fill { transform: scaleX(1); }
[data-hero-banners][data-running] [data-hero-dot][aria-current] .hero-dot-fill {
    animation: hero-dot-fill var(--hero-interval, 3s) linear;
}
@keyframes hero-dot-fill { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
    [data-hero-banners][data-enhanced] .hero-slide { transition: none; }
}

/* Cuerpo de noticias (HTML del editor): colores de la identidad B en ambos
   temas. Va fuera de capas para ganarle a los valores del plugin. */
.prose-site {
    --tw-prose-body: var(--ink);
    --tw-prose-headings: var(--ink);
    --tw-prose-lead: var(--muted);
    --tw-prose-links: var(--link);
    --tw-prose-bold: var(--ink);
    --tw-prose-counters: var(--muted);
    --tw-prose-bullets: var(--accent);
    --tw-prose-hr: var(--line);
    --tw-prose-quotes: var(--ink);
    --tw-prose-quote-borders: var(--accent);
    --tw-prose-captions: var(--muted);
}

.prose-site :where(h2, h3) {
    font-stretch: 112%;
    font-weight: 800;
}

.prose-site :where(img) {
    border-radius: 1.25rem;
}