/* ============================================================
   Davlox — Design tokens
   Editorial-tech claro. Cobalto de marca + ámbar solo para ofertas.
   ============================================================ */
:root {
    /* Paleta */
    --paper:      #F7F8FA;   /* fondo */
    --surface:    #FFFFFF;   /* tarjetas */
    --ink:        #12151C;   /* texto principal */
    --slate:      #5A6473;   /* texto secundario */
    --hairline:   #E4E7EC;   /* bordes finos */
    --cobalt:     #1F5AFF;   /* acento de marca */
    --cobalt-ink: #1541C4;   /* hover del acento */
    --cobalt-wash:#EAF0FF;   /* fondo suave del acento */
    --amber:      #FF8A00;   /* SOLO ofertas / descuentos */
    --amber-ink:  #B85E00;
    --amber-wash: #FFF3E4;

    /* Tipografía */
    --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
    --font-body:    "Inter", system-ui, -apple-system, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, monospace;

    /* Escala de tamaños */
    --fs-eyebrow: .74rem;
    --fs-small:   .875rem;
    --fs-body:    1rem;
    --fs-h3:      1.2rem;
    --fs-h2:      1.7rem;
    --fs-h1:      2.4rem;
    --fs-hero:    clamp(2.4rem, 6vw, 4rem);

    /* Espaciado */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Bordes y sombras */
    --radius:    12px;
    --radius-sm: 8px;
    --radius-lg: 20px;
    --shadow:    0 1px 2px rgba(18,21,28,.04), 0 6px 20px rgba(18,21,28,.06);
    --shadow-lg: 0 8px 40px rgba(18,21,28,.10);

    --wrap: 1120px;
}