/* ============================================================
   TOKENS — la única fuente de verdad del diseño

   Regla dura: ningún otro archivo CSS escribe un color, un tamaño,
   un radio, una sombra ni una duración a mano. Todo sale de acá.
   Si querés cambiar la identidad entera del restaurante, cambiás
   --accent y listo.

   Hay dos capas a propósito:
     1. PALETA   — los colores crudos, por tema.
     2. SEMÁNTICA— para qué se usa cada uno.
   Los componentes solo tocan la capa semántica. Así, por ejemplo,
   el subrayado de categorías pide --nav-activo y no sabe (ni tiene
   que saber) que en el tema oscuro eso resulta ser el dorado.
   ============================================================ */

/* ---------- tipografías, guardadas en el sitio ---------- */

@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:500 700;            /* variable de verdad: pesos continuos */
  font-display:swap;
  src:url('../fuentes/fraunces-var.woff2') format('woff2-variations');
  /* SOFT 20 y WONK 1 vienen horneados en el archivo; opsz queda variable */
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('../fuentes/archivo-var.woff2') format('woff2-variations');
}

/* ============================================================
   1) PALETA
   ============================================================ */

:root{
  /* --- tema claro (el de por defecto) --- */
  --paper:#F3EEE5;
  --surface:#FBF8F2;
  --ink:#16130F;
  --ink-soft:#6E6559;
  --accent:#B4441C;               /* achiote */
  --accent-2:#3E4A33;             /* verde hoja: solo dieta/vegetariano */
  --line:rgba(22,19,15,.12);
  --line-strong:rgba(22,19,15,.22);
  --on-accent:#FBF8F2;
  /* En tema claro NO hay dorado. Un solo acento. */
}

/* El tema sigue al sistema salvo que se pida uno a mano con data-theme */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#191512;
    --surface:#221C17;
    --ink:#F0E9DF;
    --ink-soft:#A29688;           /* 5.8:1 sobre surface, medido */
    --accent:#E2703A;
    --accent-2:#A8B57A;
    --line:rgba(240,233,223,.12);
    --line-strong:rgba(240,233,223,.22);
    --on-accent:#191512;
    /* El dorado existe SOLO acá, y solo como filete de 1px y como
       subrayado de la categoría activa. Nunca relleno ni texto. */
    --gold:#C9A24B;
  }
}
:root[data-theme="dark"]{
  --paper:#191512;
  --surface:#221C17;
  --ink:#F0E9DF;
  --ink-soft:#A29688;
  --accent:#E2703A;
  --accent-2:#A8B57A;
  --line:rgba(240,233,223,.12);
  --line-strong:rgba(240,233,223,.22);
  --on-accent:#191512;
  --gold:#C9A24B;
}

/* ============================================================
   2) SEMÁNTICA — lo que los componentes tienen permitido usar
   ============================================================ */

:root{
  --fondo:var(--paper);
  --fondo-elevado:var(--surface);
  --texto:var(--ink);
  --texto-2:var(--ink-soft);
  --filete:var(--line);
  --filete-fuerte:var(--line-strong);

  /* el subrayado de la categoría activa: achiote en claro, dorado en
     oscuro. El componente pide esto y no conoce ningún dorado. */
  --nav-activo:var(--accent);
  /* filete decorativo de 1px (solo existe de verdad en tema oscuro) */
  --filete-fino:var(--line-strong);

  --foco:var(--accent);
  --esqueleto:var(--line);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --nav-activo:var(--gold);
    --filete-fino:var(--gold);
  }
}
:root[data-theme="dark"]{
  --nav-activo:var(--gold);
  --filete-fino:var(--gold);
}

/* ============================================================
   3) TIPOGRAFÍA — escala modular 1.25
   ============================================================ */

:root{
  --display:'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
  --texto-fam:'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --t-12:0.75rem;      /* 12 — legales, badges */
  --t-14:0.875rem;     /* 14 — descripciones, nav */
  --t-16:1rem;         /* 16 — base */
  --t-20:1.25rem;      /* 20 — nombre de plato */
  --t-25:1.5625rem;    /* 25 — título de sheet */
  --t-31:1.9375rem;    /* 31 */
  --t-39:2.4375rem;    /* 39 — nombre del restaurante en móvil */
  --t-49:3.0625rem;    /* 49 — nombre del restaurante en escritorio */

  --lh-tight:1.15;
  --lh-base:1.55;
  --track-tight:-0.02em;
  --track-caps:0.18em;

  --peso-texto:400;
  --peso-medio:500;
  --peso-fuerte:600;
}

/* ============================================================
   4) ESPACIADO — escala de 4
   ============================================================ */

:root{
  --s-1:4px;   --s-2:8px;   --s-3:12px;  --s-4:16px;
  --s-5:20px;  --s-6:24px;  --s-8:32px;  --s-10:40px;
  --s-12:48px; --s-16:64px; --s-20:80px;
}

/* ============================================================
   5) FORMA, SOMBRA, MOVIMIENTO, MEDIDAS
   ============================================================ */

:root{
  --r-thumb:6px;       /* miniatura del plato */
  --r-card:12px;       /* tope: nada más redondo que esto */
  --r-pill:999px;

  /* Solo existen estas dos sombras. No hay una tercera. */
  --shadow-1:0 1px 2px rgba(0,0,0,.06);
  --shadow-sheet:0 8px 24px rgba(0,0,0,.10);

  --ease:cubic-bezier(.2,.8,.2,1);
  --dur:160ms;
  --dur-sheet:280ms;

  --medida:720px;                       /* ancho máximo del contenido */
  --alto-nav:52px;                      /* alto de la barra pegajosa */
  --tap:44px;                           /* área táctil mínima */
  --grano:0.03;                         /* opacidad del grano de fondo */
}

@media (prefers-reduced-motion:reduce){
  :root{ --dur:1ms; --dur-sheet:1ms; }
}