/* ═══════════════════════════════════════
   JOIN THE CAPTAIN – Design System
   base.css: Variables, Reset, Typography
   ═══════════════════════════════════════ */

:root {
  /* ── Core Palette ── */
  --ink:    #0d1b2a;
  --deep:   #08131e;
  --navy:   #112233;
  --teal:   #1a5f7a;
  --teal2:  #23809e;
  --salt:   #f2ede4;
  --sand:   #e5ddd0;
  --gold:   #c8a84b;
  --ember:  #c05a2b;
  --mist:   rgba(242,237,228,0.07);
  --line:   rgba(242,237,228,0.12);

  /* ── Extended (Dashboard/Apply) ── */
  --green:  #2e9e6a;
  --red:    #c0392b;
  --muted:  rgba(240,235,225,0.55);
  --card:   #122030;
  --bg:     #07111c;
  --panel:  #0e1f30;
}

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Outfit', sans-serif;
  background: var(--deep);
  color: var(--salt);
  overflow-x: hidden;
}

/* ── Typography ── */
.label {
  font-size: .65rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .7rem;
}
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 1rem;
}
.section-title em { font-style: italic; color: var(--gold); }
.intro-p {
  opacity: .68;
  line-height: 1.9;
  font-weight: 300;
  margin-bottom: 1rem;
}

/* ── Animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Spinner ── */
.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(13,27,42,.3);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin-right: .4rem;
}
@keyframes spin { to { transform: rotate(360deg); } }