/* ==========================================================================
   HEADLIGHT SCHOOL — BRANDBOOK 2.0 GLOBAL THEME OVERRIDES
   Pure 98% Monochrome (Apple Alabaster #F5F5F7 / Pure White #FFFFFF / Carbon #09090B)
   + 2% Micro-Surgical Cobalt Blue (#0071E3)
   Headline Display Font: Wix Madefor Display (700–800) ONLY for H1, H2 & Logo
   UI / Body / Cards / Buttons Font: Inter / Apple SF Pro (400–700)
   Code / Telemetry Font: JetBrains Mono
   ========================================================================== */

:root {
  --hl-font-display: 'Wix Madefor Display', -apple-system, BlinkMacSystemFont, sans-serif;
  --hl-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  --hl-font-mono: 'JetBrains Mono', monospace;

  --hl-bg-light: #F5F5F7;
  --hl-card-white: #FFFFFF;
  --hl-bg-dark: #09090B;
  --hl-card-dark: #141417;
  --hl-ink-primary: #1D1D1F;
  --hl-ink-muted: #86868B;
  --hl-blue: #0071E3;
  --hl-blue-hover: #005BB5;
  --hl-azure: #2997FF;
}

/* 1. Base Body & UI Typography -> Inter / SF Pro */
html, body, button, input, select, textarea, p, span, a, li, div, h3, h4, h5, h6 {
  font-family: var(--hl-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 2. Main Section & Hero Headlines ONLY -> Wix Madefor Display */
h1, h2, .font-unbounded, .hl-display {
  font-family: var(--hl-font-display) !important;
  letter-spacing: -0.03em !important;
}

/* Force card titles & UI elements with legacy .font-montserrat to clean Inter */
.font-montserrat, h3.font-unbounded, h4.font-unbounded, button.font-unbounded, a.font-unbounded {
  font-family: var(--hl-font-sans) !important;
  letter-spacing: -0.015em !important;
}

/* Keep brand logo wordmark in Wix Madefor Display */
a .font-unbounded.tracking-wider,
a .font-unbounded.tracking-tight,
.brand-wordmark {
  font-family: var(--hl-font-display) !important;
  letter-spacing: -0.03em !important;
}

/* Code blocks */
code, pre, .font-mono {
  font-family: var(--hl-font-mono) !important;
}

/* 3. Tactile 3D Monochrome Pill Toggle (Reference 4 & 5) */
.tactile-track {
  background: #EBEBED;
  border-radius: 9999px;
  padding: 5px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(255, 255, 255, 0.9);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tactile-pill {
  border-radius: 9999px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  color: #6E6E73;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
}

.tactile-pill:hover {
  color: #1D1D1F;
}

.tactile-pill.active {
  background: linear-gradient(180deg, #262629 0%, #0D0D0F 100%);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22), 0 2px 5px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Tactile 3D Square Icon Button (Reference 4 & 5) */
.tactile-icon-btn {
  background: linear-gradient(180deg, #262629 0%, #0D0D0F 100%);
  color: #FFFFFF;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.tactile-icon-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Soft Apple Card Elevation */
.shadow-apple {
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.02);
}
.shadow-apple-hover:hover {
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.04);
}