/* ============================================================
   THEME — brand colors, fonts, and surface tokens.
   This file + /config.js are "the template config": the two
   places to edit when re-skinning this site for a new business.
   site.css only ever references these tokens.
   ============================================================ */

/* Display font: Fraunces (SIL Open Font License), self-hosted
   variable font, latin subset only (~66KB, one request). */
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Brand palette (NoSMACK: warm, roasted, appetizing) ---- */
  --color-primary: #b23b23;      /* roasted chile red */
  --color-primary-deep: #8a2a15; /* seared edges */
  --color-accent: #5c7f3b;       /* tomatillo verde */
  --color-highlight: #e0a43c;    /* toasted gold */

  /* ---- Surfaces & ink ---- */
  --color-bg: #faf3e6;           /* warm cream */
  --color-surface: #fffcf5;      /* card / raised */
  --color-ink: #30211a;          /* espresso text */
  --color-ink-soft: #6f5b4e;     /* secondary text */
  --color-line: #ead9bf;         /* hairlines / borders */
  --color-footer: #2a1c15;       /* footer background */

  /* ---- Type ---- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  /* ---- Shape ---- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-card: 0 2px 6px rgba(48, 33, 26, 0.06), 0 12px 28px rgba(48, 33, 26, 0.08);
  --shadow-card-hover: 0 4px 10px rgba(48, 33, 26, 0.08), 0 18px 38px rgba(48, 33, 26, 0.14);
}