/* ─────────────────────────────────────────────────────────────
   Hair Sanctuary & Wellness — Colors + Type
   Brand essence: Silent Luxury. Grounded Wellness. Intentional Care.
   ───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Great+Vibes&family=Montserrat:wght@300;400;500;600&family=Open+Sans:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');


:root {
  /* ─── Brand Colors ──────────────────────────────────────── */
  --color-parchment:   #EFE6D6;  /* primary background */
  --color-warm-white:  #FAFAF6;  /* alternating sections */
  --color-charcoal:    #2E2E2E;  /* primary text, footer */
  --color-gold:        #B89968;  /* CTAs, accents */
  --color-gold-dark:   #A68854;  /* hover state for gold */
  --color-sage:        #8A9A7B;  /* secondary accent, links */
  --color-clay:        #B97A5C;  /* warm tertiary */
  --color-olive:       #6B7A4F;  /* deep botanical */
  --color-sand:        #D4C4A8;  /* subtle bg, dividers */
  --color-stone:       #C8BDA8;  /* borders */
  --color-terracotta:  #C4836A;  /* warm seasonal accent */

  /* ─── Semantic foreground / background ──────────────────── */
  --fg-1: var(--color-charcoal);             /* primary text */
  --fg-2: rgba(46, 46, 46, 0.80);            /* secondary text */
  --fg-3: rgba(46, 46, 46, 0.55);            /* tertiary text */
  --fg-on-dark: var(--color-parchment);
  --fg-on-gold: var(--color-warm-white);
  --accent: var(--color-gold);
  --accent-2: var(--color-sage);

  --bg-1: var(--color-parchment);            /* primary section */
  --bg-2: var(--color-warm-white);           /* alternating */
  --bg-3: var(--color-sand);                 /* subtle panels */
  --bg-dark: var(--color-charcoal);          /* footer / dark sections */

  --border-1: var(--color-stone);
  --border-2: rgba(46, 46, 46, 0.08);
  --divider-gold: var(--color-gold);

  /* ─── Functional / UI ───────────────────────────────────── */
  --color-success:  var(--color-sage);
  --color-error:    var(--color-terracotta);
  --color-info:     var(--color-gold);
  --color-disabled: var(--color-sand);

  /* ─── Typography — families ─────────────────────────────── */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-heading: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  --font-body:    'Open Sans', Calibri, Helvetica, Arial, sans-serif;
  --font-ui:      'Montserrat', Arial, Helvetica, sans-serif;
  --font-logo:    'Great Vibes', 'Allura', 'Pinyon Script', cursive;  /* brand wordmark only */

  /* ─── Typography — scale (desktop) ──────────────────────── */
  --text-h1-size: 56px;
  --text-h1-weight: 400;
  --text-h1-lh: 1.2;

  --text-h2-size: 14px;
  --text-h2-weight: 600;
  --text-h2-spacing: 6px;
  --text-h2-lh: 1.4;

  --text-h3-size: 32px;
  --text-h3-weight: 400;
  --text-h3-lh: 1.3;

  --text-h4-size: 22px;
  --text-h4-weight: 500;
  --text-h4-lh: 1.3;

  --text-body-size: 16px;
  --text-body-lh: 1.8;
  --text-body-weight: 400;

  --text-small-size: 14px;
  --text-small-lh: 1.6;

  --text-nav-size: 13px;
  --text-nav-spacing: 3px;

  --text-button-size: 13px;
  --text-button-spacing: 2px;

  --text-caption-size: 11px;
  --text-caption-spacing: 2px;

  --text-price-size: 15px;
  --text-price-spacing: 1px;

  --text-tagline-size: 18px;

  /* ─── Spacing scale ─────────────────────────────────────── */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  64px;
  --space-2xl: 80px;
  --space-3xl: 100px;

  /* ─── Layout ────────────────────────────────────────────── */
  --max-width: 1200px;
  --nav-height: 80px;

  /* ─── Radii ─────────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-arch: 200px 200px 8px 8px;
  --radius-full: 999px;

  /* ─── Elevation ─────────────────────────────────────────── */
  --shadow-nav:   0 1px 4px rgba(46, 46, 46, 0.06);
  --shadow-card:  0 2px 12px rgba(46, 46, 46, 0.04);
  --shadow-lift:  0 12px 32px rgba(46, 46, 46, 0.08);

  /* ─── Motion ────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.25, 0.1, 0.25, 1); /* @kind other */
  --t-default: 0.3s var(--ease-out);
  --t-slow:    0.6s var(--ease-out);
  --t-image:   0.4s var(--ease-out);
}

/* ─── Semantic element defaults ──────────────────────────── */

body {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  font-weight: 300;
  line-height: var(--text-body-lh);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-h1-size);
  font-weight: var(--text-h1-weight);
  line-height: var(--text-h1-lh);
  color: var(--fg-1);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  letter-spacing: var(--text-h2-spacing);
  line-height: var(--text-h2-lh);
  color: var(--color-gold);
  text-transform: uppercase;
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-lh);
  color: var(--fg-1);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--text-h4-size);
  font-weight: var(--text-h4-weight);
  line-height: var(--text-h4-lh);
  color: var(--fg-1);
  margin: 0;
}

p {
  margin: 0 0 1em 0;
  max-width: 700px;
  text-wrap: pretty;
}

.tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-tagline-size);
  color: var(--color-gold);
  line-height: 1.4;
}

.caption {
  font-family: var(--font-ui);
  font-size: var(--text-caption-size);
  letter-spacing: var(--text-caption-spacing);
  text-transform: uppercase;
  color: var(--color-sage);
}

.eyebrow,
.section-label {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--color-gold);
}

.nav-item {
  font-family: var(--font-ui);
  font-size: var(--text-nav-size);
  font-weight: 500;
  letter-spacing: var(--text-nav-spacing);
  text-transform: uppercase;
  color: var(--fg-1);
  text-decoration: none;
}

.price {
  font-family: var(--font-ui);
  font-size: var(--text-price-size);
  font-weight: 500;
  letter-spacing: var(--text-price-spacing);
  color: var(--color-gold);
}

/* ─── Brand wordmark — Great Vibes ────────────────────────
   Reserved for the words "Hair Sanctuary" (and the full name)
   when rendered as live text. Never used for any other copy. */
.wordmark {
  font-family: var(--font-logo);
  font-weight: 400;
  font-style: normal;
  color: var(--color-charcoal);
  line-height: 1;
  letter-spacing: 0;
}

/* ─── Divider — the signature thin gold rule ─────────────── */
.divider {
  width: 60px;
  height: 1px;
  background: var(--color-gold);
  margin: var(--space-md) auto;
  border: 0;
}

/* ─── Mobile scale overrides ─────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --text-h1-size: 36px;
    --text-h3-size: 24px;
    --text-nav-size: 14px;
  }
}