/* ============================================================
   THEME: Momo's Café, Vallejo CA
   Colors sampled 2026-09-24 from the Momo's logo (momosvallejo.com/images/logo.png)
   and the cream roundel behind it on @momoscafe.
   ============================================================ */

/* Fraunces: warm, heavy "diner sign" serif with an elegant italic. DM Sans: clean body. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,400..900,0..100;1,9..144,400..900,0..100&family=DM+Sans:opsz,wght@9..40,400..800&display=swap");

:root {
  /* Dark surfaces: header, hero, dark bands, footer */
  --ink: #171513;          /* warm near-black: lets the logo's red + teal carry the brand */
  --ink-2: #1f1c19;        /* lifted dark band */
  --ink-3: #2d2925;        /* image placeholder on dark */

  /* Light surfaces */
  --surface: #f8f1e3;      /* cream: logo roundel on @momoscafe (#f5e5c0), lightened for reading */
  --surface-2: #efe4cd;    /* alt band, notes, placeholders */
  --bone: #ebe2d0;         /* merch tiles */

  /* Brand */
  --accent: #cc2424;       /* logo red ("MOMO'S" lettering): primary CTAs, ticker */
  --accent-hover: #b31d1d;
  --on-accent: #fbf6ea;    /* cream on logo red: 5.0:1 */
  --accent-2: #b42020;     /* logo red, one step deeper for small text on cream (5.9:1) */
  --teal: #3c7878;         /* logo bridge + "CAFÉ" */
  --hi: #8fc2b8;           /* logo's light teal: highlights on dark (eyebrows, active nav): 9:1 on --ink */

  /* Text */
  --text: #211e1b;
  --muted: #6b645c;
  --line: rgba(33, 30, 27, .15);
  --on-dark: #f8f1e3;
  --on-dark-muted: rgba(248, 241, 227, .72);

  /* Type */
  --display: "Fraunces", Georgia, serif;
  --body: "DM Sans", system-ui, -apple-system, sans-serif;
  --display-tracking: -.015em;

  /* Shape */
  --radius: 6px;
  --wrap: 1200px;
  --header-h: 76px;
}