/* ============================================================
   THEME: Mis Antojos (Napa). Colors sampled from the shop's own assets:
   the OJO logo (Facebook/Instagram profile picture), the black serving tray
   printed with the orange "Mis Antojos" script (Facebook cover photo), the
   yellow wall and counter (cover photo, Instagram), and the red-white check
   paper boats the snacks are served in (misantojosca.com banner photo).
   ============================================================ */

/* Lilita One: a bold, rounded display face in the spirit of hand-painted shop signs.
   Figtree: a friendly, legible body face.
   Loaded by a <link> in each page's <head> (with preconnects), not @import here: an @import adds a render-blocking round trip. */

:root {
  /* Dark surfaces: header, tortas band, footer */
  --ink: #1d1814;          /* the black serving tray (Facebook cover photo) */
  --ink-2: #27201b;
  --ink-3: #3a312a;

  /* Light surfaces */
  --surface: #fff8ea;      /* warm paper */
  --surface-2: #f6e9cc;

  /* Brand */
  --sun: #f9cc2b;          /* yellow wall behind the Dorilocos tray (cover photo) + the counter (Instagram) */
  --ojo: #e58a2a;          /* orange line of the OJO logo and the tray script */
  --chile: #cf2f27;        /* tomato red in the logo's mouth; red of the check paper */
  --lechuga: #9fbe4c;      /* lettuce green in the logo's mouth */
  --azul: #3187d2;         /* the "Mis Antojos" wordmark printed on the shop's cups (the user's photo, 2026-10-05; white-balanced against the cup) */
  /* The shop's counter (the user's photo IMG_5759, 2026-10-20; white-balanced against the white table top) */
  --cielo: #afc1c4;        /* the light blue panel: the "Since October 2011" strip */
  --mostrador: #caba23;    /* the counter's green paint, a mustard-chartreuse; not used yet, ready for --home-wall */
  /* The home page's big surfaces (hero, $10 board, order band). Yellow until 2026-10-20; the user asked for the
     "Under $10" badge green. Swap to var(--mostrador) for the counter's own paint. */
  --home-wall: var(--lechuga);
  --accent: var(--sun);    /* kit: primary CTA on dark (header button, call bar) */
  --accent-hover: #ffd94f;
  --on-accent: #1d1814;    /* ink on yellow: 13.9:1 */
  --accent-2: #a14a0a;     /* logo orange, darkened for small text: 5.0:1 on --surface-2, 5.7:1 on --surface */

  /* Text */
  --text: #2a231e;
  --muted: #6c6058;
  --line: rgba(42, 35, 30, .16);
  --on-dark: #fff8ea;
  --on-dark-muted: rgba(255, 248, 234, .74);

  /* Type */
  --display: "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body: "Figtree", system-ui, -apple-system, sans-serif;
  --display-tracking: .005em;

  /* Shape */
  --radius: 14px;
  --wrap: 1180px;
  --header-h: 72px;
}