/* ============================================================
   Theme: HAMPDEN  -  dark, editorial, refined
   ------------------------------------------------------------
   For: specialty / Japanese / fine-dining-leaning cafes.
   Mood: a gallery after dark. Warm near-black ground, a single
   botanical accent, big serif display, generous negative space,
   sharp corners. Cinematic full-bleed hero.

   A theme = token overrides + a few .theme-hampden structural
   tweaks. It never edits base.css or sections.css.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

.theme-hampden {
  /* -------- Surfaces (warm near-black) -------------------- */
  --bg:        #15130F;
  --bg-2:      #1C1915;
  --surface:   #262119;

  /* -------- Text ----------------------------------------- */
  --fg:            #ECE6D8;
  --fg-muted:      rgba(236, 230, 216, 0.66);
  --heading-color: #F5F1E8;

  /* -------- Accent (matcha) + warm clay pop -------------- */
  --accent:        #8FA64E;
  --accent-bright: #B0C56C;
  --accent-hover:  #5F7331;
  --accent-2:      #C7A57A;   /* warm clay - dots, badges      */
  --on-accent:     #15130F;   /* ink text on matcha fills      */

  --hairline:   rgba(236, 230, 216, 0.12);
  --hairline-2: rgba(236, 230, 216, 0.24);

  /* -------- Hero (deep cinematic veil) ------------------- */
  --hero-ink: #F5F1E8;
  --hero-min-h: 96vh;
  --hero-overlay:
    radial-gradient(120% 100% at 50% 34%, rgba(21,19,15,0.32) 0%, rgba(21,19,15,0.66) 64%, rgba(15,13,10,0.92) 100%),
    linear-gradient(180deg, rgba(21,19,15,0.42) 0%, rgba(21,19,15,0.40) 38%, rgba(15,13,10,0.95) 100%);

  /* -------- Footer (deepest ink) ------------------------- */
  --footer-bg:     #100E0B;
  --footer-fg:     rgba(236, 230, 216, 0.70);
  --footer-strong: #F5F1E8;
  --footer-head:   #B0C56C;

  /* -------- Type ----------------------------------------- */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Zen Kaku Gothic New', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-hero: clamp(3rem, 7vw + 1rem, 6rem);
  --heading-weight: 700;
  --heading-tracking: 0;
  --eyebrow-tracking: 0.34em;

  /* -------- Sharp, quiet corners ------------------------- */
  --radius-1: 2px;
  --radius-2: 6px;
  --radius-3: 10px;
  --radius-btn: 4px;   /* sharp, editorial */
  --rule-color: var(--accent);
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4), 0 8px 30px rgba(0,0,0,0.34);
  --shadow-2: 0 18px 48px rgba(0,0,0,0.5);
}

/* ---- Structural personality -------------------------------- */

/* Hairline frame on menu cards instead of fill - more editorial */
.theme-hampden .menu-group {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.theme-hampden .menu-group__title { border-bottom-color: var(--accent); }

/* Lighter, wider section heads */
.theme-hampden .section-head { gap: var(--space-4); }
.theme-hampden .eyebrow { font-weight: 500; }

/* Italic, lifted intro lede */
.theme-hampden .intro__lede { font-style: italic; font-weight: 500; }

/* Refined outline nav button - reads like a gallery; the hero's
   primary CTA stays a bold filled button. */
.theme-hampden .nav__links .btn {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.theme-hampden .nav__links .btn:hover {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}