/* Estilos base de la marca compartidos por todas las páginas.
   REGLA DEL PROYECTO: todo el CSS se escribe con nesting.

   Dirección: «café porteño antañón» — confitería años 30–50.
   Paleta vintage (contrastes verificados con cálculo):
   - --crema sobre cualquier punto del gradiente hero: 9.4–14.1:1
   - --laton-claro (texto dorado) sobre espresso: 5.7–7.2:1
   - --laton (filetes/UI) sobre oscuro: 4.8–7.2:1
   - --bronce (filetes/UI) sobre claro: 4.1–4.5:1
   - --suave sobre card/papel: 6.25/5.69:1
   - --oliva (ícono, no-textual) sobre card: 5.95:1
   - texto espresso sobre --laton (botón placa): 7.2:1 */

:root {
    --papel: #f1e8d6;          /* crema envejecido, fondo del sitio */
    --card: #f9f3e4;           /* superficie de cards, nada de blanco puro */
    --espresso: #352719;       /* superficie oscura media (sección menú) */
    --espresso-oscuro: #241a11; /* marrón profundo: nav sólido, footer, hero */
    --cacao: #3a2c1d;          /* texto principal sobre claro */
    --suave: #6b5642;          /* texto secundario sobre claro */
    --laton: #c9a25f;          /* dorado apagado: filetes, bordes, placas */
    --laton-claro: #d8b273;    /* latón más claro para texto dorado */
    --bronce: #8a6a3e;         /* filetes y ornamentos sobre fondos claros */
    --oliva: #5a6130;          /* verde de marca heredado, sólo como acento mínimo */
    --crema: #f2e9d5;          /* texto sobre superficies oscuras */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* scrollbar tematizada (fijo el scheme: nada de scrollbar gris del sistema) */
    color-scheme: light;
    scrollbar-color: var(--bronce) var(--papel); /* bronce 4.1:1 s/ papel */
    scrollbar-width: thin;

    &::-webkit-scrollbar {
        width: 12px;
    }

    &::-webkit-scrollbar-track {
        background: var(--papel);
    }

    &::-webkit-scrollbar-thumb {
        /* placa de bronce con filete interior, mismo idioma que las cards */
        background: var(--bronce);
        border: 2px solid var(--papel);
        border-radius: 6px;
    }
}

/* menos movimiento: el smooth-scroll también se apaga */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--papel);
    color: var(--cacao);
    overflow-x: hidden;

    h1,
    h2,
    h3 {
        font-family: 'Yeseva One', serif;
        font-weight: 400;
    }
}

/* grano de papel: film sutil sobre TODA la página (uniforme, como vidria
    de confitería). pointer-events: none para no interceptar nada */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* superficies del navegador mimetizadas con la paleta (piso de calidad) */
::selection {
    background: var(--laton);
    color: var(--espresso-oscuro); /* 7.2:1 */
}

/* anillo de foco por contexto: bronce firma sobre fondos claros…
   (los muchos elementos sobre oscuro lo pisan a latón en su propio css) */
:focus-visible {
    outline: 2px solid var(--bronce);
    outline-offset: 3px;
}

:root {
    /* el navegador pinta controles (scrollbar, slider, etc.) con la paleta */
    accent-color: var(--bronce);
}