/* styles.css
   Verdon Partners — production styles
   - Variables & base
   - Typography tweaks
   - Components (buttons)
   - Utilities (animations, fade-in)
   - Sections (hero, OS accents)
*/

/* ===== Variables & Base ===== */
:root {
  --bg: #0a0a0a;
  --text: #e2e2e2;
  --muted: #a3a3a3;
  --accent: #C5A46D; /* rich bronze */
}

html, body {
  background-color: var(--bg);
  color: var(--text);
}

body {
  font-family: 'Inter', sans-serif;
}

.font-display {
  font-family: 'Playfair Display', serif;
}

.accent-text { color: var(--accent); }

/* ===== Typography Tweaks ===== */
h1.tracking-tighter { letter-spacing: -0.02em; }
h2.tracking-tight { letter-spacing: -0.02em; }

/* ===== Fade-in (progressive enhancement) ===== */
/* Default: visible without JS */
.fade-in {
  opacity: 1;
  transform: none;
}
/* When JS is present, enable transitions */
.js .fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Components ===== */
.btn {
  display: inline-block;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: 1px solid var(--accent);
  padding: 0.75rem 2rem;
  border-radius: 9999px;
  font-weight: 700;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.btn:hover {
  background: var(--accent);
  color: #0a0a0a;
  border-color: var(--accent);
}
.btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Legacy card tone (kept minimal if reused) */
.glass-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: none;
}

/* ===== Sections ===== */
.hero-bg {
  background-image: url('images/verdon-partners-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Accent discipline: only color micro-subheads in OS list */
#operating-system .space-y-4 strong { color: var(--accent); }

/* ===== Motion & Keyframes ===== */
@keyframes twinkle {
  from { opacity: 0; }
  to { opacity: 0.7; }
}
@keyframes animate-fade-in-down {
  0% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes animate-fade-in-up {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Reduced motion: disable transitions/animations */
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1 !important; transform: none !important; transition: none !important; }
}