/* ============================================================
   Theme: FADE  -  minimal monochrome modern barbershop
   ------------------------------------------------------------
   For: clean, contemporary barbershops / men's grooming -
   Northbridge / Mount Lawley. Mood: a stark white-walled shop
   with black stations and one chair under directional light.
   Pure black-and-white: white IS the accent, the primary button
   is white with black text. A geometric display sans (Space
   Grotesk) over Inter body, thin hairlines, lots of negative
   space, high contrast and restraint.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

.theme-fade {
  /* -------- Surfaces (near-black, layered) --------------- */
  --bg:        #0D0D0D;
  --bg-2:      #161616;
  --surface:   #1A1A1A;

  /* -------- Text (off-white on black) ------------------- */
  --fg:            #FAFAFA;
  --fg-muted:      #8C8C8C;
  --heading-color: #FAFAFA;

  /* -------- Accent (white as the accent) ---------------- */
  --accent:        #FAFAFA;
  --accent-bright: #FFFFFF;   /* links / prices on dark         */
  --accent-hover:  #D4D4D4;
  --accent-2:      #B8B8B8;   /* dots, badges, hero pop         */
  --on-accent:     #0D0D0D;   /* black ink on the white button  */

  --hairline:   rgba(250, 250, 250, 0.12);
  --hairline-2: rgba(250, 250, 250, 0.22);

  /* -------- Hero (dark overlay, no colour cast) --------- */
  --hero-ink: #FAFAFA;
  --hero-min-h: 92vh;
  --hero-overlay:
    radial-gradient(120% 95% at 50% 40%, rgba(13,13,13,0.34) 0%, rgba(13,13,13,0.64) 66%, rgba(8,8,8,0.92) 100%),
    linear-gradient(180deg, rgba(13,13,13,0.52) 0%, rgba(13,13,13,0.42) 42%, rgba(8,8,8,0.94) 100%);

  /* -------- Footer (deepest black) ---------------------- */
  --footer-bg:     #080808;
  --footer-fg:     rgba(250, 250, 250, 0.70);
  --footer-strong: #FAFAFA;
  --footer-head:   #8C8C8C;

  /* -------- Type ---------------------------------------- */
  --font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-hero: clamp(2.8rem, 7vw + 1rem, 6rem);
  --heading-weight: 600;
  --heading-tracking: -0.02em;
  --eyebrow-tracking: 0.30em;

  /* -------- Tight corners, generous rhythm -------------- */
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 6px;
  --radius-pill: 999px;
  --radius-btn: 4px;       /* tight, minimal */
  --section-pad: var(--space-10);
  --rule-color: var(--accent);
  --shadow-1: 0 1px 2px rgba(0,0,0,0.50), 0 10px 28px rgba(0,0,0,0.40);
  --shadow-2: 0 18px 48px rgba(0,0,0,0.55);
}

/* ---- Structural personality: minimal monochrome ----------- */

/* Geometric headings, tight tracking, lots of air */
.theme-fade h1,
.theme-fade h2,
.theme-fade .hero__title,
.theme-fade .footer__wordmark { letter-spacing: -0.02em; }

/* Thin hairline section rule */
.theme-fade .rule { height: 1px; width: 56px; }

/* Matte panels with hairline borders, no glow */
.theme-fade .menu-group {
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: none;
}
.theme-fade .menu-group__title { border-bottom: 1px solid var(--accent); }
.theme-fade .menu-row__price { color: var(--accent-bright); }

/* Primary button: white fill, black text, mono and crisp */
.theme-fade .btn {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.theme-fade .btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-accent);
}

/* Ghost button: thin white outline that fills white on hover */
.theme-fade .btn--ghost {
  background: transparent;
  color: var(--hero-ink);
  border: 1px solid color-mix(in srgb, var(--hero-ink) 55%, transparent);
}
.theme-fade .btn--ghost:hover {
  background: var(--hero-ink);
  color: var(--on-accent);
  border-color: var(--hero-ink);
}

/* Quiet link underline stays monochrome, no colour shift */
.theme-fade .link-quiet:hover { color: var(--accent-bright); border-color: currentColor; }

/* Hairline social circles, fill white on hover */
.theme-fade .socials a { border-color: var(--hairline-2); color: var(--fg); }
.theme-fade .socials a:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* TODAY / map-open badges read as black-on-white chips */
.theme-fade .hours-table .badge,
.theme-fade .map__open { background: var(--accent); color: var(--on-accent); }
.theme-fade .map__open:hover { background: var(--accent-hover); color: var(--on-accent); }