/* ==========================================================================
   night-shop.css — ONE brand skin for every public page.
   Loads AFTER each page's own styles and re-tokens them to the Night Shop
   system used by the landing page and admin: midnight steel panels, seam
   lines, amber work light, Barlow Condensed display, IBM Plex Mono data.
   It only overrides CSS custom properties + fonts, so every page keeps its
   own layout and behaviour. Remove the <link> on any page to revert it.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Barlow:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
  /* forum.php / blog.php token names */
  --night: #070b14;
  --panel: #101a2b;
  --panel-2: #0b1322;
  --line: rgba(148, 172, 212, .16);
  --ink: #e9eff9;
  --muted: #93a5c0;
  --amber: #ffb62e;
  --blue: #5b96ff;
  --green: #37d67a;
  --radius: 10px;

  /* service-page.css token names (5 service + 11 neighborhood pages) */
  --bg: #070b14;
  --panel2: #122036;
  --gold: #ffb62e;
  --gold2: #ffd070;
  --r: 8px;

  /* index.html / appointment.html token names */
  --bg-1: #0a1322;
  --bg-2: #03070d;
  --gold-1: #ffd070;
  --gold-2: #ffb62e;
  --gold-3: #e09a10;
  --text: #e9eff9;
  --line-2: rgba(148, 172, 212, .28);
  --panel-soft: rgba(13, 22, 38, .72);
}

/* Type roles — the brand voice */
body {
  font-family: "Barlow", Inter, ui-sans-serif, system-ui, "Segoe UI", sans-serif;
}
h1, h2, h3 {
  font-family: "Barlow Condensed", Impact, "Arial Narrow", sans-serif;
  /* pages set weights up to 950; Barlow Condensed tops out at 700, and the
     browser's synthetic bold smears it — pin the real weight */
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.kicker, .eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ==========================================================================
   Component layer — the SAME header, buttons, brand mark, and surfaces on
   every page family, not just the same colors.
   Families: header.fb + .btn/.btn-amber (forum/blog) · .top/.mark/.primary
   (5 service + 11 town pages) · header.header/.btn-primary/.btn-outline/
   .btn-soft (index) · .btn-book (appointment).
   ========================================================================== */

/* One sticky steel header everywhere */
header.fb, header.header, body > .top, .wrap > .top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(6, 11, 20, .93);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(148, 172, 212, .12);
  box-shadow: none;
}

/* One brand mark: amber steel door slats (matches landing + admin) */
.brand-mark, .top .mark, header .mark {
  border-radius: 8px;
  background:
    linear-gradient(180deg, transparent 0 30%, rgba(6, 11, 20, .5) 30% 34%, transparent 34% 64%, rgba(6, 11, 20, .5) 64% 68%, transparent 68%),
    linear-gradient(135deg, #ffd070, #ffb62e);
  color: #201400;
  box-shadow: 0 6px 18px rgba(255, 182, 46, .28);
}

/* One button system: amber = primary action, steel outline = the rest */
.btn, .btn-primary, .btn-outline, .btn-soft, .btn-book, .btn-amber, .top .primary, .actions .primary {
  border-radius: 8px;
  font-weight: 700;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn-amber, .btn-primary, .btn-book, .top .primary, .actions .primary, .nav-book {
  background: #ffb62e;
  border-color: #ffb62e;
  color: #201400;
}
.btn-amber:hover, .btn-primary:hover, .btn-book:hover, .top .primary:hover, .actions .primary:hover, .nav-book:hover {
  background: #ffd070;
  border-color: #ffd070;
  color: #201400;
  transform: translateY(-1px);
}
.btn-outline, .btn-soft {
  background: transparent;
  border: 1px solid rgba(148, 172, 212, .32);
  color: #e9eff9;
}
.btn-outline:hover, .btn-soft:hover { border-color: #93a5c0; transform: translateY(-1px); }
header.fb .btn:not(.btn-amber):hover, .top .btn:not(.primary):hover { transform: translateY(-1px); }

/* Surfaces: same radius + seam border discipline */
:root { --radius-lg: 12px; --radius-md: 10px; --radius-sm: 8px; --radius-xl: 14px; }

/* Footers end every page on the same deep night */
footer, .footer, .site-footer {
  background: #03070d;
  border-top: 1px solid rgba(148, 172, 212, .1);
}

/* Quiet, consistent details everywhere */
::selection { background: rgba(255, 182, 46, .3); }
a:focus-visible, button:focus-visible {
  outline: 2px solid #ffb62e;
  outline-offset: 2px;
}