/* ============================================================
   tokens.css — Bliss Africa Hair Braiding
   Design System Tokens + Global Utilities
============================================================ */

/* --- Global Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --- Color Tokens --- */
:root {
  --color-bg:           #0f0d0a;
  --color-bg-alt:       #1a1610;
  --color-surface:      #241f17;
  --color-gold:         #c9a84c;
  --color-gold-hover:   #b8952f;
  --color-gold-soft:    #d4b86a;
  --color-green:        #2d5a3d;
  --color-green-soft:   #3a7a52;
  --color-text:         #f5f0e8;
  --color-text-soft:    #b5a998;
  --color-text-muted:   #7a6f62;
  --color-line:         #2e2820;
  --color-overlay:      rgba(15, 13, 10, 0.85);

  /* --- Typography Scale --- */
  --text-display:       clamp(3rem, 7vw, 5rem);
  --text-h1:            clamp(2.4rem, 5vw, 3.6rem);
  --text-h2:            clamp(1.8rem, 3.5vw, 2.6rem);
  --text-h3:            1.35rem;
  --text-body:          1.0625rem;
  --text-small:         0.875rem;
  --text-eyebrow:       0.75rem;

  /* --- Spacing & Shape --- */
  --space-section:        100px;
  --space-section-mobile: 60px;
  --space-gap:            32px;
  --radius:               6px;
  --radius-lg:            12px;
  --radius-pill:          999px;
  --container-max:        1100px;

  /* --- Shadows --- */
  --shadow-card:    0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-glow:    0 0 30px rgba(201, 168, 76, 0.15);

  /* --- Gradient --- */
  --gradient-hero: linear-gradient(170deg, #0f0d0a 0%, #1a1610 40%, #12100b 100%);
}

/* --- Body --- */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;
}

/* --- Container Utility --- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Section Utility --- */
.section {
  padding: var(--space-section) 24px;
}

@media (max-width: 720px) {
  .section {
    padding: var(--space-section-mobile) 24px;
  }
}

/* --- Button Styles --- */
.btn {
  display: inline-block;
  padding: 14px 32px;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  font-size: var(--text-small);
  text-decoration: none;
  border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: var(--color-gold);
  color: var(--color-bg);
}

.btn-primary:hover {
  background: var(--color-gold-hover);
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--color-gold);
  border: 1.5px solid var(--color-gold);
}

.btn-ghost:hover {
  background: rgba(201, 168, 76, 0.1);
}

/* --- Eyebrow Text --- */
.eyebrow {
  font-family: 'Nunito Sans', sans-serif;
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 16px;
}

/* --- Gold Hairline Divider --- */
.gold-divider {
  width: 60px;
  height: 1.5px;
  background: var(--color-gold);
  border: none;
  margin: 20px auto;
  opacity: 0.6;
}

/* --- Animation Ready State --- */
/* Elements with this class start hidden; GSAP reveals them */
.anim-ready {
  opacity: 0;
}