/* ============================================================================
   Menu Hunter — brand tokens and primitives
   Mirrors BACKEND_BRAND_HANDOFF.md (app build of 19 Aug 2026): editorial
   paper-and-sage. This file is the single source of truth for the website, the
   admin panel and anything else server-rendered — do not redefine these values
   per page.

   Two rules that are easy to break by accident:
     · no shadows, no gradients — separation comes from hairlines and color
     · no web font for type; the display face is the platform serif, so a slow
       font host can never block first paint
   ========================================================================= */

:root {
  /* Paper — background stack */
  --mh-paper:            #F3EEDF;  /* page background       */
  --mh-paper-raised:     #FAF6EA;  /* cards, inputs         */
  --mh-paper-high:       #FFFFFF;  /* dialogs, modals only  */
  --mh-hairline:         #DBD3BE;  /* 1px dividers          */
  --mh-border:           #B6AC91;  /* stronger edges        */

  /* Sage — brand primary */
  --mh-sage:             #5D7259;  /* buttons, focus, links */
  --mh-sage-dim:         #465943;  /* hover / pressed       */
  --mh-sage-soft:        #DDE4D7;  /* selection tint        */

  /* Ink — type stack */
  --mh-ink:              #1B1613;  /* body text             */
  --mh-ink-muted:        #5C554B;  /* secondary text        */
  --mh-ink-faint:        #8A8172;  /* tertiary / disabled   */

  /* Gold — secondary accent, sparingly */
  --mh-gold:             #B79144;  /* ratings, delight pops */
  --mh-gold-dim:         #8A6D33;

  /* Semantic */
  --mh-success:          #3F663F;
  --mh-warning:          #B78A1C;
  --mh-danger:           #9E3226;

  /* Type stacks. The serif is deliberately the platform serif: Georgia on
     iOS/desktop, Noto Serif on Android. Same reasoning as the app. */
  --mh-sans: system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mh-serif: Georgia, "Times New Roman", serif;

  /* Radii. Deliberately small — 4px controls, 6px surfaces, 2px thumbnails. */
  --mh-r-control: 4px;
  --mh-r-surface: 6px;
  --mh-r-thumb: 2px;
}

/* ---------------------------------------------------------------- type roles */

/* Hero / display headline. 34px is the app's display size; the web hero is
   allowed to scale up on wide viewports because a phone headline set at 34px
   on a 1200px page reads as a subhead. Everything else about the role — face,
   weight, tracking, sentence case — is unchanged. */
.mh-display {
  font-family: var(--mh-serif);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -0.4px;
  line-height: 1.18;
  color: var(--mh-ink);
}
.mh-display--hero { font-size: clamp(34px, 4.6vw, 52px); }

/* Section titles, card titles. */
.mh-title {
  font-family: var(--mh-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.1px;
  line-height: 1.3;
  color: var(--mh-ink);
}
.mh-title--sm { font-size: 20px; }
.mh-title--lg { font-size: 24px; }

/* The one flourish: an italic serif word inside a display headline.
   Once per screen at most. */
.mh-accent {
  font-style: italic;
  font-weight: 400;
  color: var(--mh-sage);
}

/* Wordmark, when set as live text rather than the logo PNG. */
.mh-wordmark {
  font-family: var(--mh-serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 3.2px;
  text-transform: uppercase;
  color: var(--mh-ink);
  white-space: nowrap;
}

/* Context label above a headline: city, section, category. Never decoration. */
.mh-eyebrow {
  font-family: var(--mh-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--mh-sage);
  line-height: 1.4;
}
.mh-eyebrow--muted { color: var(--mh-ink-faint); }

/* Meta chips, timestamps. */
.mh-smallcaps {
  font-family: var(--mh-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.9px;
  text-transform: uppercase;
  color: var(--mh-ink-muted);
}

/* Numbers are typography here: order numbers, totals, counts. */
.mh-numeric {
  font-family: var(--mh-serif);
  font-size: 30px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  color: var(--mh-ink);
}
.mh-tabular { font-variant-numeric: tabular-nums; }

/* Editorial list index — a plain italic serif numeral. (The handoff's "N°01"
   prefix was dropped at the owner's request; the numeral alone carries the
   order without the unfamiliar glyph.) */
.mh-index {
  font-family: var(--mh-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--mh-sage);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ surfaces */

.mh-card {
  background: var(--mh-paper-raised);
  border: 1px solid var(--mh-hairline);
  border-radius: var(--mh-r-surface);
  box-shadow: none;
}

.mh-rule { border: 0; border-top: 1px solid var(--mh-hairline); }

/* Magazine section marker:  Featured ─────────────── VIEW ALL */
.mh-section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.mh-section-head > .mh-title,
.mh-section-head > .mh-display { flex: 0 0 auto; margin: 0; }
.mh-section-head > .rule { flex: 1 1 auto; height: 0; border-top: 1px solid var(--mh-hairline); }
.mh-section-head > .action { flex: 0 0 auto; text-decoration: none; }

/* ------------------------------------------------------------------- buttons */
/* Tracked uppercase labels, 4px radius, no shadow, no gradient. Never
   sentence case: it is "SIGN IN", not "Sign in". */

.mh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--mh-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: var(--mh-r-control);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
  transition: background-color .18s, border-color .18s, color .18s;
}
.mh-btn--primary { background: var(--mh-sage); color: var(--mh-paper-raised); }
.mh-btn--primary:hover:not(:disabled) { background: var(--mh-sage-dim); }
.mh-btn--outline {
  background: transparent;
  border: 1.2px solid var(--mh-sage);
  color: var(--mh-sage);
  padding: 12px 25px; /* keep the same optical box as the filled variant */
}
.mh-btn--outline:hover:not(:disabled) { background: var(--mh-sage-soft); }
.mh-btn--text { background: transparent; color: var(--mh-sage); padding: 10px 4px; }
.mh-btn--text:hover:not(:disabled) { color: var(--mh-sage-dim); }
.mh-btn--danger { background: var(--mh-danger); color: var(--mh-paper-raised); }
.mh-btn--danger:hover:not(:disabled) { background: #82281F; }
.mh-btn:disabled { opacity: .5; cursor: not-allowed; }
.mh-btn:focus-visible { outline: 2px solid var(--mh-sage); outline-offset: 2px; }

/* -------------------------------------------------------------------- inputs */

.mh-field {
  display: block;
  font-family: var(--mh-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--mh-ink-muted);
  margin: 20px 0 7px;
}
.mh-input {
  width: 100%;
  padding: 12px 13px;
  font-family: var(--mh-sans);
  font-size: 15px;
  color: var(--mh-ink);
  background: var(--mh-paper-raised);
  border: 1px solid var(--mh-hairline);
  border-radius: var(--mh-r-control);
  caret-color: var(--mh-sage);
}
.mh-input:focus { outline: none; border: 1.4px solid var(--mh-sage); }
.mh-input::placeholder { color: var(--mh-ink-faint); }

/* ---------------------------------------------------------------- image tile */
/* A photo that fails — a 403 from lh3.googleusercontent.com, a dead scrape URL —
   must degrade to a neutral paper block. A broken-image glyph is never shown.
   Pair with mhImageFallback() below, or with onerror="mhBlank(this)". */

.mh-thumb {
  width: 88px;
  height: 88px;
  border: 1px solid var(--mh-hairline);
  border-radius: var(--mh-r-thumb);
  object-fit: cover;
  background: var(--mh-paper-raised);
  box-shadow: none;
  display: block;
}
.mh-photo { display: block; width: 100%; background: var(--mh-paper-raised); object-fit: cover; }
/* No icon, no text, no red X — a quiet tone-on-tone block. Applied by
   mhBlank() in brand.js, which also swaps the src for a transparent pixel so
   this background is what the reader actually sees. */
.mh-blank {
  background: var(--mh-paper-raised);
  border: 1px solid var(--mh-hairline);
}
img.mh-blank { object-fit: none; }

/* -------------------------------------------------------------------- chrome */

.mh-nav {
  background: var(--mh-paper);
  border-bottom: 1px solid var(--mh-hairline);
}
.mh-nav a { color: var(--mh-ink-muted); text-decoration: none; }
.mh-nav a:hover { color: var(--mh-ink); }
.mh-nav a.active {
  color: var(--mh-sage);
  box-shadow: inset 0 -2px 0 var(--mh-sage);
}

/* Rating / status pill — gold for ratings, sage for state. */
.mh-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--mh-hairline);
  border-radius: 999px;
  background: var(--mh-paper-raised);
  font-family: var(--mh-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--mh-ink-muted);
}
.mh-pill--sage { color: var(--mh-sage); border-color: var(--mh-sage); background: var(--mh-sage-soft); }
.mh-pill--gold { color: var(--mh-gold-dim); border-color: var(--mh-gold); }
.mh-pill--sage .dot,
.mh-pill--gold .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Callout — hairline box with a 3px sage (or semantic) spine. */
.mh-callout {
  background: var(--mh-paper-raised);
  border: 1px solid var(--mh-hairline);
  border-left: 3px solid var(--mh-sage);
  border-radius: 0 var(--mh-r-surface) var(--mh-r-surface) 0;
  padding: 14px 18px;
}
.mh-callout--warn { border-left-color: var(--mh-danger); }
.mh-callout--ok { border-left-color: var(--mh-success); }