/* ==========================================================
   La Receta de Casa · Design tokens
   Fuente de verdad: index.html (corregido a partir del kit)
   ========================================================== */

/* ---------- Fuentes (autoalojadas, subset latin) ---------- */
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/barlow-condensed-800.woff2) format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-semi-condensed-600.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlow-400.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-600.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-700.woff2) format("woff2")}

:root{
  /* ---------- Paleta de marca (valores fijos) ---------- */
  --azul:#2A85C4;          /* Azul Delantal */
  --amarillo:#F5B31C;      /* Amarillo Rebozado */
  --verde:#1B6B39;         /* Verde Huerta */
  --pizarra:#17384F;       /* Tinta Pizarra */
  --papel:#F6F0DE;         /* Papel Envejecido */
  --papel-claro:#FCFBF2;
  --borde:#C9C2AC;
  --gris-texto:#8A8471;
  --celeste-texto:#DCEBF7;
  --verde-claro:#BFE0C9;
  --whatsapp:#25D366;

  /* ---------- Roles (cambian con el tema) ---------- */
  --fondo:var(--papel);
  --tarjeta:var(--papel-claro);
  --tinta:var(--pizarra);
  --titulo:var(--azul);
  --rotulo:var(--verde);
  --precio:var(--verde);
  --linea:var(--borde);
  --gris:var(--gris-texto);
  --grano:rgba(23,56,79,.045);
  --sombra-letra:4px 4px 0 rgba(23,56,79,.14);

  /* ---------- Tipografía ---------- */
  --f-titulo:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --f-texto:"Barlow",Arial,Helvetica,sans-serif;
  --f-rotulo:"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;

  /* ---------- Espaciado ---------- */
  --esp-1:8px;
  --esp-2:12px;
  --esp-3:16px;
  --esp-4:24px;
  --esp-5:40px;
  --esp-6:64px;
  --esp-7:84px;
  --margen:var(--esp-4);   /* margen lateral de las secciones */
  --ancho:1180px;          /* ancho máximo del contenido */

  /* ---------- Layout y movimiento ---------- */
  --alto-menu:82px;
  --curva:cubic-bezier(.16,1,.3,1);
}

/* ---------- Modo oscuro ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fondo:#12293A; --tarjeta:#173549; --tinta:#F6F0DE; --titulo:#5FAEE3; --rotulo:#7CC79A;
    --precio:#F5B31C; --linea:#3C5A6D; --gris:#A9B4B5; --grano:rgba(246,240,222,.035);
    --sombra-letra:4px 4px 0 rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --fondo:#12293A; --tarjeta:#173549; --tinta:#F6F0DE; --titulo:#5FAEE3; --rotulo:#7CC79A;
  --precio:#F5B31C; --linea:#3C5A6D; --gris:#A9B4B5; --grano:rgba(246,240,222,.035);
  --sombra-letra:4px 4px 0 rgba(0,0,0,.35);
}

/* ---------- Celular ---------- */
@media (max-width:860px){
  :root{--alto-menu:66px;--margen:var(--esp-3)}
}