/* ============================================================
   Theme: ANVIL  -  rugged industrial barbershop
   ------------------------------------------------------------
   For: warehouse / workshop-style barbershops and grooming
   rooms. Mood: concrete and raw steel, Edison bulbs, an amber
   task-light glow. A condensed grotesque shouting in uppercase,
   a rust-amber accent against steel grey, small hard corners,
   heavy and utilitarian. A DARK theme.
   ============================================================ */

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

.theme-anvil {
  /* -------- Surfaces (concrete + steel, dark) ------------ */
  --bg:        #131312;
  --bg-2:      #1C1B19;
  --surface:   #232220;

  /* -------- Text (bone white on dark) -------------------- */
  --fg:            #ECE8E1;
  --fg-muted:      #9A9489;
  --heading-color: #ECE8E1;

  /* -------- Accent (amber / rust) + steel ---------------- */
  --accent:        #C4702E;
  --accent-bright: #DB8743;   /* readable links/prices on dark  */
  --accent-hover:  #A85C22;
  --accent-2:      #8A8F96;   /* steel - badges, dots           */
  --on-accent:     #131312;

  --hairline:   rgba(236, 232, 225, 0.12);
  --hairline-2: rgba(236, 232, 225, 0.22);

  /* -------- Hero (neutral-dark industrial veil) ---------- */
  --hero-ink: #ECE8E1;
  --hero-min-h: 90vh;
  --hero-overlay:
    linear-gradient(180deg, rgba(12,12,11,0.58) 0%, rgba(14,13,12,0.46) 42%, rgba(10,10,9,0.90) 100%),
    linear-gradient(100deg, rgba(196,112,46,0.14) 0%, transparent 64%);

  /* -------- Footer (near-black steel) -------------------- */
  --footer-bg:     #0E0E0D;
  --footer-fg:     rgba(236, 232, 225, 0.70);
  --footer-strong: #ECE8E1;
  --footer-head:   #DB8743;

  /* -------- Type ----------------------------------------- */
  --font-display: 'Oswald', 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: 700;
  --heading-tracking: 0.005em;
  --eyebrow-tracking: 0.24em;

  /* -------- Small, hard corners -------------------------- */
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 6px;
  --radius-pill: 3px;   /* squared-off buttons               */
  --radius-btn: 3px;       /* tight, industrial */
  --rule-color: var(--accent);
  --shadow-1: 0 1px 2px rgba(0,0,0,0.40), 0 6px 18px rgba(0,0,0,0.34);
  --shadow-2: 0 16px 40px rgba(0,0,0,0.50);
}

/* ---- Structural personality: condensed industrial -------- */

/* Headings stamp in uppercase, condensed and heavy */
.theme-anvil h1,
.theme-anvil h2,
.theme-anvil h3,
.theme-anvil .nav__brand,
.theme-anvil .footer__wordmark { text-transform: uppercase; }

.theme-anvil .hero__title { letter-spacing: 0.01em; }

/* Heavier eyebrow, wider tracking like a stencil label */
.theme-anvil .eyebrow { font-weight: 700; }

/* Boxy stations on steel surface, heavy accent rule */
.theme-anvil .menu-group {
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  box-shadow: none;
}
.theme-anvil .menu-group__title { border-bottom: 3px solid var(--accent); }
.theme-anvil .menu-group__title h3 { letter-spacing: 0.02em; }
.theme-anvil .menu-row__price { font-variant-numeric: tabular-nums; }

/* Uppercase buttons reinforce the stencil-label personality */
.theme-anvil .btn { text-transform: uppercase; letter-spacing: 0.08em; }