/* ============================================================
   Theme: SHARP  -  premium dark + gold men's grooming
   ------------------------------------------------------------
   For: upmarket barbershops / gentleman's grooming / Subiaco -
   Cottesloe vibe. Mood: a refined, low-lit shop in leather,
   timber and brass. A high-contrast serif (Cormorant Garamond)
   carries the display voice; Inter keeps the body clean. Brass
   gold accent on near-black, soft radii, generous spacing.
   ============================================================ */

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

.theme-sharp {
  /* -------- Surfaces (near-black, layered) --------------- */
  --bg:        #0E0E10;
  --bg-2:      #16161A;
  --surface:   #1C1C21;

  /* -------- Text (warm bone on dark) -------------------- */
  --fg:            #F3F1EA;
  --fg-muted:      #A59F92;
  --heading-color: #F3F1EA;

  /* -------- Accent (brass gold) ------------------------- */
  --accent:        #C9A24B;
  --accent-bright: #E0BD6A;   /* readable links/prices on dark  */
  --accent-hover:  #A8853A;
  --accent-2:      #C9A24B;   /* dots, badges, hero pop         */
  --on-accent:     #0E0E10;   /* near-black ink on gold         */

  --hairline:   rgba(201, 162, 75, 0.16);
  --hairline-2: rgba(201, 162, 75, 0.30);

  /* -------- Hero (deep warm-gold veil) ------------------ */
  --hero-ink: #F3F1EA;
  --hero-min-h: 92vh;
  --hero-overlay:
    radial-gradient(120% 95% at 50% 38%, rgba(14,14,16,0.30) 0%, rgba(14,14,16,0.62) 66%, rgba(10,10,12,0.90) 100%),
    linear-gradient(180deg, rgba(14,14,16,0.52) 0%, rgba(14,14,16,0.40) 42%, rgba(10,10,12,0.92) 100%),
    linear-gradient(100deg, rgba(201,162,75,0.10) 0%, transparent 60%);

  /* -------- Footer (deepest black) ---------------------- */
  --footer-bg:     #0A0A0C;
  --footer-fg:     rgba(243, 241, 234, 0.74);
  --footer-strong: #F3F1EA;
  --footer-head:   #C9A24B;

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

  --fs-hero: clamp(3rem, 7vw + 1rem, 6.5rem);
  --heading-weight: 600;
  --heading-tracking: 0.005em;
  --eyebrow-tracking: 0.30em;

  /* -------- Soft corners + generous rhythm -------------- */
  --radius-1: 4px;
  --radius-2: 12px;
  --radius-3: 20px;
  --radius-pill: 999px;
  --section-pad: var(--space-10);
  --rule-color: var(--accent);
  --shadow-1: 0 1px 2px rgba(0,0,0,0.40), 0 10px 28px rgba(0,0,0,0.42);
  --shadow-2: 0 18px 48px rgba(0,0,0,0.55);
}

/* ---- Structural personality: refined, upscale ------------- */

/* Big, airy serif headings - let the display face breathe */
.theme-sharp h1,
.theme-sharp h2,
.theme-sharp .hero__title,
.theme-sharp .intro__lede,
.theme-sharp .menu-group__title h3,
.theme-sharp .footer__wordmark { letter-spacing: 0.01em; }

/* Gilded section rule - a thin brass line */
.theme-sharp .rule { height: 2px; width: 64px; }

/* Menu cards: matte panels with a hairline brass top edge */
.theme-sharp .menu-group {
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-1);
}
.theme-sharp .menu-group__title { border-bottom: 1.5px solid var(--accent); }
.theme-sharp .menu-group__title h3 { font-size: 1.7rem; }
.theme-sharp .menu-row__price { color: var(--accent-bright); }

/* Hero lede in italic serif reads as a tailored sub-line */
.theme-sharp .hero__lede { font-style: italic; }

/* Brass-circle socials glow on hover */
.theme-sharp .socials a { border-color: var(--hairline-2); color: var(--accent-bright); }
.theme-sharp .socials a:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Ghost button: brass outline that fills on hover */
.theme-sharp .btn--ghost { border-color: color-mix(in srgb, var(--accent) 70%, transparent); color: var(--hero-ink); }
.theme-sharp .btn--ghost:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }