/* =====================================================================
   COCOCURE HAUS — DESIGN BIBLE v1 (September 2026)
   "The door is open. The table is the night."

   Scoped deliberately to the five surfaces named in the brief. It is NOT
   applied to `.coco-ed` at large: that scope is shared with private hire,
   catering, dine and groups, and is built to match the /brunch/ landing
   page, all of which are staying as they are.

   Two registers, one brand. Flip the ground and nothing else:
     Room   (23:00–04:00) cocoa ground, cream type, ember accent, brass
                          only where money changes hands.
     Garden (13:00–20:00) cream ground, cocoa type, ember accent.
                          The food menu is Garden register.

   Loaded after haus-pages.css. It works by re-pointing the existing
   design tokens on the page's own modifier class rather than restating
   2,000 rules — the modifier sits on the same element as `.coco-ed`, so
   it wins on specificity and every component inherits the brand at once.
   ===================================================================== */

/* ── Room register — drinks, bottle service, birthdays ───────────────── */
.coco-ed--drinks,
.coco-ed--bottles,
.coco-ed--birthdays {
  --bg:        #17110E;              /* cocoa: warm, not black — dark skin
                                        under coloured light reads richer
                                        against brown than against #000 */
  --gold:      #FF5A36;              /* ember is the one accent */
  --gold-dim:  rgba(255, 90, 54, 0.15);
  --cream:     #F3E7D3;              /* never pure white, anywhere */
  --muted:     #C9B9A4;              /* oat */
  --surface:   #2A211C;              /* ash */
  --surface-2: #1F1712;
  --border:    #4A3B33;              /* rule */
  --wine:      #C7371B;              /* ember deep */

  --haus-brass:       #D9A24A;       /* tables, bottles, birthdays ONLY */
  --haus-ember-hover: #FF7D5E;
  --haus-ground:      #17110E;

  /* Two faces, never a third. Night names and prices are Bebas;
     everything that has to be read is Onest. `--ed-serif` drives 34
     selectors here including an italic <em>, which Bebas has no cut for,
     so it points at Onest and Bebas is applied deliberately below. */
  --ed-serif:  'Onest', system-ui, -apple-system, sans-serif;
  --ed-sans:   'Onest', system-ui, -apple-system, sans-serif;
  --haus-display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;

  --ed-radius: 0;                    /* the wordmark supplies every curve */
}

/* ── Garden register — the food menu ─────────────────────────────────── */
.coco-ed--menu {
  --bg:        #F3E7D3;              /* cream ground by day */
  --gold:      #C7371B;              /* ember at text size on cream must be
                                        ember deep: 5.1:1, where plain ember
                                        would be 3.0:1 and fail */
  --gold-dim:  rgba(199, 55, 27, 0.12);
  --cream:     #17110E;              /* type flips to cocoa */
  --muted:     #6B5A4E;
  --surface:   #E6D8C0;              /* sand */
  --surface-2: #EDE2CE;
  --border:    #C9B9A4;              /* oat rules on cream */
  --wine:      #C7371B;

  --haus-brass:       #D9A24A;
  --haus-ember-hover: #E5451F;       /* hover on cream */
  --haus-ground:      #F3E7D3;

  --ed-serif:  'Onest', system-ui, -apple-system, sans-serif;
  --ed-sans:   'Onest', system-ui, -apple-system, sans-serif;
  --haus-display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;

  --ed-radius: 0;
}

/* ── Gallery — a different scope with its own token names ────────────── */
.coco-haus-page--gallery {
  --haus-gold:        #FF5A36;
  --haus-gold-muted:  #C7371B;
  --haus-gold-dim:    rgba(255, 90, 54, 0.3);
  --haus-gold-border: rgba(255, 90, 54, 0.5);
  --haus-gold-glow:   rgba(255, 90, 54, 0.15);
  --haus-bg:          #17110E;
  --haus-bg2:         #1F1712;
  --haus-bg3:         #2A211C;
  --haus-text:        #F3E7D3;
  --haus-text2:       #F3E7D3;
  --haus-text-dim:    #C9B9A4;
  --haus-border:      #4A3B33;
  --haus-font-display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --haus-font-body:   'Onest', system-ui, -apple-system, sans-serif;
  --haus-radius:      0;
  --haus-radius-sm:   0;
}

/* ── Radius 0 ────────────────────────────────────────────────────────── */
.coco-ed--menu, .coco-ed--menu *,
.coco-ed--drinks, .coco-ed--drinks *,
.coco-ed--bottles, .coco-ed--bottles *,
.coco-ed--birthdays, .coco-ed--birthdays *,
.coco-haus-page--gallery, .coco-haus-page--gallery * {
  border-radius: 0 !important;
}
/* The exception: anything genuinely round stays round. */
.coco-ed--menu img[style*="50%"],
.coco-ed--drinks img[style*="50%"],
.coco-ed--bottles img[style*="50%"],
.coco-ed--birthdays img[style*="50%"] {
  border-radius: 50% !important;
}

/* ── Display type: headlines and prices only ─────────────────────────── */
.coco-ed--menu .coco-ed-hero-title,
.coco-ed--drinks .coco-ed-hero-title,
.coco-ed--bottles .coco-ed-hero-title,
.coco-ed--birthdays .coco-ed-hero-title,
.coco-ed--menu .coco-ed-close-h,
.coco-ed--drinks .coco-ed-close-h,
.coco-ed--bottles .coco-ed-close-h,
.coco-ed--birthdays .coco-ed-close-h,
.coco-haus-page--gallery h1 {
  font-family: var(--haus-display, 'Bebas Neue', Impact, sans-serif) !important;
  font-weight: 400 !important;        /* Bebas ships one weight; never fake-bold */
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
  line-height: 0.88 !important;
  color: var(--gold, #FF5A36) !important;
}

/* Prices are display type, with tabular figures so a column lines up. */
.coco-ed--menu .chp-price,
.coco-ed--drinks .chp-price,
.coco-ed--bottles .chp-price {
  font-family: var(--haus-display) !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  font-variant-numeric: tabular-nums;
}

/* Section headings are not night names, so they stay Onest.
   "Night names, DJ names and prices in Bebas. Everything else in Onest." */
.coco-ed--menu .coco-h2, .coco-ed--menu .coco-h3,
.coco-ed--drinks .coco-h2, .coco-ed--drinks .coco-h3,
.coco-ed--bottles .coco-h2, .coco-ed--bottles .coco-h3,
.coco-ed--birthdays .coco-h2, .coco-ed--birthdays .coco-h3 {
  font-family: var(--ed-sans) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--cream) !important;
}

.coco-ed--menu .coco-kicker,
.coco-ed--drinks .coco-kicker,
.coco-ed--bottles .coco-kicker,
.coco-ed--birthdays .coco-kicker {
  font-family: var(--ed-sans) !important;
  font-weight: 600 !important;
  font-size: 13px !important;         /* Onest never below 13px on screen */
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
}

/* ── Buttons: ember fill, cocoa label, flush left, 48 minimum ────────── */
.coco-ed--menu .coco-btn,
.coco-ed--drinks .coco-btn,
.coco-ed--bottles .coco-btn,
.coco-ed--birthdays .coco-btn,
.coco-ed--birthdays .coco-ed-tier-cta {
  font-family: var(--ed-sans) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  padding: 14px 16px !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: var(--gold) !important;
  color: var(--haus-ground) !important;
  border: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  transition: background 240ms ease-out !important;
}
.coco-ed--menu .coco-btn:hover,
.coco-ed--drinks .coco-btn:hover,
.coco-ed--bottles .coco-btn:hover,
.coco-ed--birthdays .coco-btn:hover,
.coco-ed--birthdays .coco-ed-tier-cta:hover {
  background: var(--haus-ember-hover) !important;
  color: var(--haus-ground) !important;
}

/* Secondary is a 2px rule and no fill. */
.coco-ed--menu .coco-btn--outline, .coco-ed--menu .coco-btn--cream,
.coco-ed--drinks .coco-btn--outline, .coco-ed--drinks .coco-btn--cream,
.coco-ed--bottles .coco-btn--outline, .coco-ed--bottles .coco-btn--cream,
.coco-ed--birthdays .coco-btn--outline, .coco-ed--birthdays .coco-btn--cream {
  background: transparent !important;
  color: var(--cream) !important;
  border: 2px solid var(--cream) !important;
}

/* ── Rules are 2px, always ───────────────────────────────────────────── */
.coco-ed--menu hr, .coco-ed--drinks hr,
.coco-ed--bottles hr, .coco-ed--birthdays hr {
  height: 2px;
  border: 0;
  background: var(--border);
}
.coco-ed--menu .coco-ed-section + .coco-ed-section,
.coco-ed--drinks .coco-ed-section + .coco-ed-section,
.coco-ed--bottles .coco-ed-section + .coco-ed-section,
.coco-ed--birthdays .coco-ed-section + .coco-ed-section {
  border-top: 2px solid var(--border);
}

/* ── Brass: tables, bottles and birthdays only ───────────────────────── */
/* Never a background, never on the door price. The bottle list is the one
   artefact where brass leads. */
.coco-ed--bottles .chp-price {
  color: var(--haus-brass) !important;
}
.coco-ed--birthdays .coco-ed-tier--feat {
  border: 2px solid rgba(217, 162, 74, 0.45) !important;
}
.coco-ed--birthdays .coco-ed-tier-badge {
  background: var(--haus-brass) !important;
  color: #17110E !important;
}

/* ── Focus: 2px ember, 2px offset ────────────────────────────────────── */
.coco-ed--menu :focus-visible,
.coco-ed--drinks :focus-visible,
.coco-ed--bottles :focus-visible,
.coco-ed--birthdays :focus-visible,
.coco-haus-page--gallery :focus-visible {
  outline: 2px solid #FF5A36 !important;
  outline-offset: 2px !important;
}

/* ── Shadows are for dialogs only ────────────────────────────────────── */
.coco-ed--menu .coco-ed-tier, .coco-ed--drinks .coco-ed-tier,
.coco-ed--bottles .coco-ed-tier, .coco-ed--birthdays .coco-ed-tier,
.coco-ed--menu .coco-ed-feature, .coco-ed--drinks .coco-ed-feature,
.coco-ed--bottles .coco-ed-feature, .coco-ed--birthdays .coco-ed-feature,
.coco-ed--menu .coco-ed-banner, .coco-ed--drinks .coco-ed-banner,
.coco-ed--bottles .coco-ed-banner, .coco-ed--birthdays .coco-ed-banner {
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ── Body scale ──────────────────────────────────────────────────────── */
.coco-ed--menu, .coco-ed--drinks,
.coco-ed--bottles, .coco-ed--birthdays {
  font-size: 17px;
  line-height: 1.45;
}


/* =====================================================================
   TWNTY7 — DESIGN BIBLE v1.0 (September 2026)
   "Nothing before eleven." Scoped to the [coco_twnty7] page only, which
   borrows the Haus page shell but is a different brand: black, lime,
   paper, one accent, radius 0, and no daytime register.
   ===================================================================== */
.coco-haus-page--twnty7 {
  --haus-gold:        #C8FF2E;   /* 27 Lime */
  --haus-gold-muted:  #F4F4EF;   /* pressed is paper, not a darker lime */
  --haus-gold-dim:    rgba(200, 255, 46, 0.3);
  --haus-gold-border: rgba(200, 255, 46, 0.55);
  --haus-gold-glow:   transparent;   /* no glow, anywhere */
  --haus-bg:          #0B0B0B;       /* Two AM */
  --haus-bg2:         #141414;
  --haus-bg3:         #1A1A1A;
  --haus-text:        #F4F4EF;       /* Paper */
  --haus-text2:       #F4F4EF;
  --haus-text-dim:    #9A9A94;       /* Smoke */
  --haus-border:      #3A3A38;
  --haus-font-display: 'Archivo', Impact, 'Arial Narrow', sans-serif;
  --haus-font-body:   'Archivo', system-ui, sans-serif;
  --haus-radius:      0;
  --haus-radius-sm:   0;
  --twnty7-pink:      #C8FF2E;       /* the pink override is retired */
  --twnty7-pink-dim:  rgba(200, 255, 46, 0.3);
}
.coco-haus-page--twnty7,
.coco-haus-page--twnty7 *,
.coco-haus-page--twnty7 *::before,
.coco-haus-page--twnty7 *::after {
  border-radius: 0 !important;
}
.coco-haus-page--twnty7 h1,
.coco-haus-page--twnty7 h2 {
  font-family: 'Archivo', Impact, 'Arial Narrow', sans-serif !important;
  font-stretch: 62% !important;
  font-weight: 900 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
  line-height: 0.88 !important;
}
.coco-haus-page--twnty7 .coco-venue-btn-primary,
.coco-haus-page--twnty7 .chp-btn--twnty7 {
  background: #C8FF2E !important;
  background-image: none !important;
  color: #0B0B0B !important;
  border: 0 !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  min-height: 48px;
}
.coco-haus-page--twnty7 .coco-venue-btn-primary:hover,
.coco-haus-page--twnty7 .chp-btn--twnty7:hover {
  background: #C8FF2E !important;   /* hover: no change */
  transform: none !important;
}
.coco-haus-page--twnty7 :focus-visible {
  outline: 2px solid #C8FF2E !important;
  outline-offset: 2px !important;
}