/* ── FREIGHTPATH ACADEMY — SHARED STYLES ── */
/* Variables, reset, and base shared across all pages */

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

/* ══════════════════════════════════════════
   LIGHT THEME — White + Navy (default)
══════════════════════════════════════════ */
:root {
  --black:       #ffffff;
  --black2:      #f0f4f8;
  --black3:      #e2e8f0;
  --black4:      #cbd5e1;
  --orange:      #1e40af;
  --orange-dark: #1e3a8a;
  --orange-deep: #172554;
  --white:       #0f172a;
  --gray:        #64748b;
  --gray-light:  #334155;
  --border:      rgba(30,64,175,0.18);
  --success:     #16a34a;
  --danger:      #e74c3c;

  /* extras for hardcoded rgba */
  --accent-rgb:  30,64,175;
  --nav-bg:      rgba(255,255,255,0.97);
  --card-bg:     #f8fafc;
  --card-border: rgba(30,64,175,0.18);
  --btn-text:    #ffffff;
  --ghost-border:rgba(30,64,175,0.35);
  --outline-stroke: #0f172a;
  --shadow:      rgba(30,64,175,0.12);
}

/* ══════════════════════════════════════════
   DARK THEME — Dark Navy Blue
══════════════════════════════════════════ */
[data-theme="dark"] {
  --black:       #060d1a;
  --black2:      #0a1628;
  --black3:      #0f2040;
  --black4:      #1a2f55;
  --orange:      #3b82f6;
  --orange-dark: #2563eb;
  --orange-deep: #1d4ed8;
  --white:       #f0f6ff;
  --gray:        #94a3b8;
  --gray-light:  #cbd5e1;
  --border:      rgba(59,130,246,0.2);
  --success:     #2ecc71;
  --danger:      #e74c3c;

  --accent-rgb:  59,130,246;
  --nav-bg:      rgba(6,13,26,0.97);
  --card-bg:     #0a1628;
  --card-border: rgba(59,130,246,0.18);
  --btn-text:    #060d1a;
  --ghost-border:rgba(255,255,255,0.25);
  --outline-stroke: #f0f6ff;
  --shadow:      rgba(59,130,246,0.15);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Barlow', sans-serif;
  background: var(--black);
  color: var(--white);
  transition: background 0.3s, color 0.3s;
}

/* ── THEME TOGGLE BUTTON ── */
.theme-toggle {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--black3); border: 1px solid var(--border);
  color: var(--white); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; transition: all 0.2s; flex-shrink: 0;
}
.theme-toggle:hover { background: var(--orange); color: var(--btn-text); border-color: var(--orange); }