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

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
}

:root {
  /* Pencil / graphite dark theme */
  --ink: #0c0c0c;
  --graphite: #121212;
  --charcoal: #181818;
  --slate: #1e1e1e;
  --ash: #2a2a2a;
  --mist: #e8e8e8;
  --paper: #f2f2f2;
  --smoke: #a8a8a8;
  --muted: #7c7c7c;
  --gold: #c9a55c;
  --gold-hover: #e6c27a;
  --gold-soft: rgba(201, 165, 92, 0.18);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.35);
  --radius: 22px;
  --transition: all 0.3s ease;
  --container: 1280px;

  /* Legacy aliases used across section styles */
  --hero-white: #1e1e1e;
  --hero-offwhite: #121212;
  --hero-light: #1a1a1a;
  --hero-text: #eaeaea;
  --hero-text-soft: #a8a8a8;
  --hero-gold: #c9a55c;
  --hero-gold-hover: #e6c27a;
  --hero-border: rgba(255, 255, 255, 0.08);
  --hero-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
  --hero-shadow-soft: 0 20px 50px rgba(0, 0, 0, 0.5);
  --hero-radius: 28px;
  --hero-transition: all 0.3s ease;
  --hero-container: 1280px;
}

body {
  margin: 0;
  padding-top: 0;
  font-family: "Poppins", sans-serif;
  color: var(--mist);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(201, 165, 92, 0.05), transparent 42%),
    linear-gradient(180deg, #0e0e0e 0%, #121212 50%, #0c0c0c 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

/* Gold headings — modern pencil look */
h1:not(.hero__title),
h2,
.features-section__title,
.top-services__title,
.about-team__title,
.gallery-section__title,
.reviews-block__title,
.contact-location__title,
.final-cta__title,
.page-hero__title,
.services-hero__title,
.gallery-hero__title,
.gallery-filter__title,
.footer__heading,
.training-hero__title,
.barber-hero__title,
.about-hero__title,
.contact-hero__title,
.reviews-hero__title {
  color: var(--gold) !important;
}

.hero__brand {
  color: var(--gold) !important;
}

.hero__title {
  color: #f0f0f0 !important;
}

@media (max-width: 767px) {
  body {
    padding-top: 0;
  }
}