/* ═══════════════════════════════════════════════════════════════
   BOOM'S BARBERSHOP — style.css
   Foundation: Variables · Reset · Typography · Utilities
   Theme: Premium Luxury (Dark + Gold)
   Version: 1.0.0
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   GOOGLE FONTS
───────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* ─────────────────────────────────────────
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
───────────────────────────────────────── */
:root {

  /* ── COLOR: BASE PALETTE ── */
  --color-black:          #000000;
  --color-gold:           #C9A84C;
  --color-gold-light:     #E2C47A;
  --color-gold-dark:      #A0832D;
  --color-gold-pale:      #F0DFA0;
  --color-white:          #FFFFFF;

  /* ── COLOR: BACKGROUNDS ── */
  --color-bg-base:        #080808;
  --color-bg-deep:        #0D0D0D;
  --color-bg-surface:     #141414;
  --color-bg-elevated:    #1C1C1C;
  --color-bg-overlay:     rgba(8, 8, 8, 0.85);

  /* ── COLOR: TEXT ── */
  --color-text-primary:   #F0EDE6;
  --color-text-secondary: #A89F8C;
  --color-text-muted:     #6B6459;
  --color-text-inverse:   #080808;

  /* ── COLOR: ACCENT (GOLD) ── */
  --color-accent:         #C9A84C;
  --color-accent-hover:   #E2C47A;
  --color-accent-dim:     rgba(201, 168, 76, 0.10);
  --color-accent-dim-md:  rgba(201, 168, 76, 0.15);
  --color-accent-border:  rgba(201, 168, 76, 0.25);
  --color-accent-border-strong: rgba(201, 168, 76, 0.55);

  /* ── COLOR: SEMANTIC ── */
  --color-success:        #4CAF82;
  --color-error:          #E05252;
  --color-whatsapp:       #25D366;
  --color-whatsapp-dark:  #1DA851;
  --color-whatsapp-dim:   rgba(37, 211, 102, 0.12);
  --color-star:           #F5C518;

  /* ── COLOR: BORDERS ── */
  --color-border:         rgba(201, 168, 76, 0.20);
  --color-border-subtle:  rgba(255, 255, 255, 0.06);
  --color-border-strong:  rgba(201, 168, 76, 0.50);

  /* ── TYPOGRAPHY: FONTS ── */
  --font-display:         'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:            'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;

  /* ── TYPOGRAPHY: WEIGHTS ── */
  --weight-light:         300;
  --weight-regular:       400;
  --weight-medium:        500;
  --weight-semibold:      600;
  --weight-bold:          700;
  --weight-black:         800;

  /* ── TYPOGRAPHY: FLUID SIZE SCALE ── */
  --text-xs:    clamp(0.688rem, 1.5vw, 0.75rem);
  --text-sm:    clamp(0.813rem, 1.8vw, 0.875rem);
  --text-base:  clamp(0.938rem, 2vw,   1rem);
  --text-md:    clamp(1rem,     2.2vw, 1.125rem);
  --text-lg:    clamp(1.125rem, 2.5vw, 1.25rem);
  --text-xl:    clamp(1.25rem,  3vw,   1.5rem);
  --text-2xl:   clamp(1.5rem,   4vw,   2rem);
  --text-3xl:   clamp(1.875rem, 4.5vw, 2.5rem);
  --text-4xl:   clamp(2.25rem,  5.5vw, 3.25rem);
  --text-5xl:   clamp(2.75rem,  7vw,   4.5rem);
  --text-6xl:   clamp(3.5rem,   9vw,   6rem);

  /* ── TYPOGRAPHY: LINE HEIGHT ── */
  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-loose:  1.85;

  /* ── TYPOGRAPHY: LETTER SPACING ── */
  --tracking-tight:   -0.025em;
  --tracking-normal:   0em;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.10em;
  --tracking-widest:   0.18em;

  /* ── SPACING (4px base grid) ── */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-7:    28px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-14:   56px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-32:   128px;

  /* ── SECTION SPACING ── */
  --section-py:       clamp(64px, 10vw, 100px);
  --section-px:       clamp(16px, 5vw,  24px);
  --section-gap:      clamp(40px, 8vw,  64px);

  /* ── CONTAINER ── */
  --container-max:    1200px;
  --container-wide:   1400px;
  --container-narrow: 800px;
  --container-pad:    clamp(16px, 4vw, 24px);

  /* ── BORDER RADIUS ── */
  --radius-none:  0px;
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    20px;
  --radius-full:  9999px;

  /* ── SHADOWS ── */
  --shadow-xs:    0 1px 3px  rgba(0, 0, 0, 0.40);
  --shadow-sm:    0 2px 8px  rgba(0, 0, 0, 0.50);
  --shadow-md:    0 4px 20px rgba(0, 0, 0, 0.60);
  --shadow-lg:    0 8px 40px rgba(0, 0, 0, 0.70);
  --shadow-xl:    0 16px 60px rgba(0, 0, 0, 0.80);

  --shadow-gold-xs: 0 0 10px  rgba(201, 168, 76, 0.12);
  --shadow-gold-sm: 0 0 20px  rgba(201, 168, 76, 0.18);
  --shadow-gold-md: 0 0 40px  rgba(201, 168, 76, 0.22);
  --shadow-gold-lg: 0 0 70px  rgba(201, 168, 76, 0.28);

  --shadow-card:
    0 4px 24px rgba(0, 0, 0, 0.50),
    0 0 0 1px var(--color-border);

  --shadow-card-hover:
    0 8px 40px rgba(0, 0, 0, 0.70),
    0 0 0 1px var(--color-accent-border),
    var(--shadow-gold-xs);

  --shadow-btn-gold:  0 4px 16px rgba(201, 168, 76, 0.35);
  --shadow-btn-green: 0 4px 16px rgba(37,  211, 102, 0.35);

  /* ── TRANSITIONS ── */
  --transition-fast:   0.15s ease;
  --transition-base:   0.30s ease;
  --transition-slow:   0.50s ease;
  --transition-spring: 0.60s cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Z-INDEX SCALE ── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-float:    500;
  --z-toast:    600;
}

/* ─────────────────────────────────────────
   CSS RESET & NORMALIZE
───────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Prevent horizontal scroll */
body.menu-open {
  overflow: hidden;
}

/* ── MEDIA ── */
img,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  object-fit: cover;
}

/* ── TYPOGRAPHY BASE ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

h1 { font-size: var(--text-5xl); font-weight: var(--weight-black); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl);  }
h4 { font-size: var(--text-lg);  }
h5 { font-size: var(--text-md);  }
h6 { font-size: var(--text-base);}

p {
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  max-width: 70ch;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent-hover);
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Remove default focus outline — replaced with custom */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* ─────────────────────────────────────────
   CONTAINER SYSTEM
───────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--wide {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ─────────────────────────────────────────
   GRID SYSTEM
───────────────────────────────────────── */
.grid {
  display: grid;
  gap: var(--gap-card, var(--space-6));
}

.grid--2 {
  grid-template-columns: 1fr;
}

.grid--3 {
  grid-template-columns: 1fr;
}

.grid--4 {
  grid-template-columns: 1fr 1fr;
}

.grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ─────────────────────────────────────────
   FLEX UTILITIES
───────────────────────────────────────── */
.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.flex-col    { display: flex; flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.gap-2       { gap: var(--space-2); }
.gap-3       { gap: var(--space-3); }
.gap-4       { gap: var(--space-4); }
.gap-6       { gap: var(--space-6); }
.gap-8       { gap: var(--space-8); }

/* ─────────────────────────────────────────
   SECTION PATTERN
───────────────────────────────────────── */
.section {
  padding-block: var(--section-py);
  background-color: var(--color-bg-base);
}

.section--alt {
  background-color: var(--color-bg-deep);
}

.section--surface {
  background-color: var(--color-bg-surface);
}

.section--gold {
  background-color: var(--color-accent-dim);
  border-block: 1px solid var(--color-border);
}

/* ── SECTION HEADER ── */
.section__header {
  text-align: center;
  margin-bottom: var(--section-gap);
}

.section__header--left {
  text-align: left;
}

.section__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 16px;
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-5);
}

.section__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  max-width: 700px;
  margin-inline: auto;
}

.section__header--left .section__title {
  margin-inline: 0;
}

.section__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  max-width: 580px;
  margin-inline: auto;
}

.section__header--left .section__subtitle {
  margin-inline: 0;
}

/* ─────────────────────────────────────────
   TYPOGRAPHY UTILITIES
───────────────────────────────────────── */
.text-gold     { color: var(--color-accent); }
.text-muted    { color: var(--color-text-muted); }
.text-secondary{ color: var(--color-text-secondary); }
.text-white    { color: var(--color-white); }
.text-center   { text-align: center; }
.text-left     { text-align: left; }
.text-right    { text-align: right; }
.text-upper    { text-transform: uppercase; }
.text-sm       { font-size: var(--text-sm); }
.text-xs       { font-size: var(--text-xs); }
.text-lg       { font-size: var(--text-lg); }
.text-xl       { font-size: var(--text-xl); }
.text-2xl      { font-size: var(--text-2xl); }
.font-display  { font-family: var(--font-display); }
.font-bold     { font-weight: var(--weight-bold); }
.leading-loose { line-height: var(--leading-loose); }
.tracking-wide { letter-spacing: var(--tracking-wide); }
.tracking-widest{ letter-spacing: var(--tracking-widest); }

/* Gold gradient text effect */
.text-gold-gradient {
  background: linear-gradient(
    135deg,
    var(--color-gold-pale)  0%,
    var(--color-gold)       40%,
    var(--color-gold-dark)  70%,
    var(--color-gold)       100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
}

/* ─────────────────────────────────────────
   SPACING UTILITIES
───────────────────────────────────────── */
.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }

.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

.pt-0  { padding-top: 0; }
.pb-0  { padding-bottom: 0; }

/* ─────────────────────────────────────────
   DISPLAY UTILITIES
───────────────────────────────────────── */
.hidden         { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ─────────────────────────────────────────
   DIVIDER
───────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1px solid var(--color-border-subtle);
  margin-block: var(--space-8);
}

.divider--gold {
  border-top-color: var(--color-accent-border);
}

/* ─────────────────────────────────────────
   IMAGE UTILITIES
───────────────────────────────────────── */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.img-gold-border {
  border: 2px solid var(--color-accent-border);
  border-radius: var(--radius-sm);
}

.img-circle {
  border-radius: var(--radius-full);
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ─────────────────────────────────────────
   GOLD DECORATIVE LINE
   Used under section titles on some pages
───────────────────────────────────────── */
.gold-line {
  width: 60px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-accent),
    transparent
  );
  margin-inline: auto;
  margin-top: var(--space-4);
}

.gold-line--left {
  margin-inline: 0;
}

/* ─────────────────────────────────────────
   GRAIN TEXTURE OVERLAY
   Applied on hero + final CTA sections
───────────────────────────────────────── */
.grain-overlay {
  position: relative;
}

.grain-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}

.grain-overlay > * {
  position: relative;
  z-index: 2;
}

/* ─────────────────────────────────────────
   GOLD SHIMMER BORDER
   Animated gold border for special elements
───────────────────────────────────────── */
.shimmer-border {
  position: relative;
  border: 1px solid var(--color-accent-border);
}

.shimmer-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    transparent 20%,
    var(--color-gold) 50%,
    transparent 80%
  );
  background-size: 200% auto;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: shimmer-border-anim 3s linear infinite;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.shimmer-border:hover::before {
  opacity: 1;
}

@keyframes shimmer-border-anim {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ─────────────────────────────────────────
   SCROLLBAR STYLING
───────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-deep);
}

::-webkit-scrollbar-thumb {
  background: var(--color-gold-dark);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold);
}

/* ─────────────────────────────────────────
   SELECTION STYLING
───────────────────────────────────────── */
::selection {
  background-color: var(--color-accent-dim-md);
  color: var(--color-gold-light);
}

/* ─────────────────────────────────────────
   RESPONSIVE BREAKPOINTS REFERENCE
   (used across all other CSS files)

   Mobile:  default (0px+)
   xs:      480px+
   sm:      640px+
   md:      768px+
   lg:      1024px+
   xl:      1280px+
   2xl:     1440px+
───────────────────────────────────────── */