/* ============================================================
   base.css — Reset, Globals, Utilities
   Heidi Schimmel Hypnose
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600;700&family=Lora:ital,wght@0,400;0,500;1,400&display=swap');

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background:              var(--color-bg);
  color:                   var(--color-text);
  font-family:             var(--font-body);
  font-size:               var(--text-base);
  line-height:             1.7;
  -webkit-font-smoothing:  antialiased;
  overflow-x:              hidden;
}

img, video {
  display:   block;
  max-width: 100%;
}

a {
  color:           inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

/* ── Layout Utilities ── */
.container {
  width:     100%;
  max-width: var(--max-w);
  margin:    0 auto;
  padding:   0 var(--space-lg);
}

/* ── Typography Utilities ── */
.section-label {
  font-family:    var(--font-head);
  font-size:      var(--text-xs);
  font-weight:    700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color:          var(--color-accent);
}

.nr {
  font-family:    var(--font-head);
  font-size:      var(--text-xs);
  font-weight:    700;
  letter-spacing: var(--tracking-wide);
  color:          var(--color-text-muted);
}

/* ── Button System ── */
.btn {
  display:        inline-block;
  font-family:    var(--font-head);
  font-size:      var(--text-xs);
  font-weight:    700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding:        0.9rem 2rem;
  cursor:         pointer;
  transition:     background var(--duration) var(--ease),
                  color      var(--duration) var(--ease),
                  border-color var(--duration) var(--ease);
  border:         2px solid transparent;
  white-space:    nowrap;
  border-radius:  var(--radius);
}

.btn--primary {
  background:   var(--color-accent);
  color:        var(--color-text-inv);
  border-color: var(--color-accent);
}
.btn--primary:hover {
  background:   transparent;
  color:        var(--color-accent);
}

.btn--ghost {
  background:   transparent;
  color:        var(--color-text);
  border-color: var(--color-text);
}
.btn--ghost:hover {
  background: var(--color-text);
  color:      var(--color-text-inv);
}

.btn--inv {
  background:   transparent;
  color:        var(--color-text-inv);
  border-color: var(--color-text-inv);
}
.btn--inv:hover {
  background: var(--color-text-inv);
  color:      var(--color-text);
}

.btn--sm {
  padding: 0.55rem 1.2rem;
}

/* ── Divider ── */
.divider {
  width:      100%;
  height:     1px;
  background: var(--color-line);
}
.divider--dark {
  background: var(--color-line-dark);
}

/* ── Scroll Reveal ── */
.reveal {
  opacity:    0;
  transform:  translateY(28px);
  transition: opacity   var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}
.reveal.visible {
  opacity:   1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ── Responsive base ── */
@media (max-width: 768px) {
  .container {
    padding: 0 var(--space-sm);
  }
}