/* ============================================================
   CrewCompliance — Master Design System
   Shared tokens, base reset, mesh background, and common
   utilities. All page-specific stylesheets build on this.
   ============================================================ */

/* ── Design tokens ───────────────────────────────────────── */
:root {
  /* Type */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif: 'Instrument Serif', 'Times New Roman', serif;

  /* Palette — defaults overridden by JS theme */
  --bg-0: #060B1A;
  --bg-1: #0A1426;
  --bg-2: #0F1D38;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --fg-0: #F4F6FB;
  --fg-1: rgba(244, 246, 251, 0.78);
  --fg-2: rgba(244, 246, 251, 0.55);
  --fg-3: rgba(244, 246, 251, 0.38);

  --primary: #F57C00;        /* CrewCompliance orange */
  --primary-glow: #FF9A38;
  --accent: #5B8DFF;         /* cobalt — complementary depth */
  --accent-soft: #C6D5FF;
  --success: #5BD4A3;

  /* Density */
  --pad-x: clamp(20px, 4vw, 64px);
  --section-y: clamp(48px, 7vw, 96px);
  --hero-gap: 56px;

  /* Radii / shadow */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --shadow-card: 0 1px 0 rgba(255,255,255,.06) inset,
                 0 30px 60px -20px rgba(0, 12, 40, 0.5),
                 0 14px 30px -16px rgba(0, 12, 40, 0.4);
  --shadow-elev: 0 1px 0 rgba(255,255,255,.08) inset,
                 0 40px 80px -24px rgba(0, 12, 40, 0.65),
                 0 18px 40px -20px rgba(0, 12, 40, 0.55);
}

/* ── Theme: light ─────────────────────────────────────────── */
html[data-theme="light"] {
  --bg-0: #EEF1F8;
  --bg-1: #F4F6FB;
  --bg-2: #FFFFFF;
  --surface: rgba(255, 255, 255, 0.65);
  --surface-2: rgba(255, 255, 255, 0.85);
  --border: rgba(15, 30, 60, 0.10);
  --border-strong: rgba(15, 30, 60, 0.18);
  --fg-0: #0A1426;
  --fg-1: rgba(10, 20, 38, 0.78);
  --fg-2: rgba(10, 20, 38, 0.58);
  --fg-3: rgba(10, 20, 38, 0.40);
  --shadow-card: 0 1px 0 rgba(255,255,255,.7) inset,
                 0 30px 60px -20px rgba(20, 40, 90, 0.18),
                 0 14px 30px -16px rgba(20, 40, 90, 0.10);
  --shadow-elev: 0 1px 0 rgba(255,255,255,.8) inset,
                 0 40px 80px -24px rgba(20, 40, 90, 0.22),
                 0 18px 40px -20px rgba(20, 40, 90, 0.14);
}

/* ── Density modifiers ────────────────────────────────────── */
html[data-density="compact"] {
  --pad-x: clamp(16px, 3.2vw, 48px);
  --section-y: clamp(32px, 5vw, 72px);
  --hero-gap: 40px;
}
html[data-density="comfortable"] {
  --pad-x: clamp(24px, 5vw, 80px);
  --section-y: clamp(64px, 9vw, 120px);
  --hero-gap: 72px;
}

/* ── Base reset ──────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-0);
  color: var(--fg-0);
  font-family: var(--font-sans);
  font-feature-settings: 'ss01', 'ss02', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ============================================================
   GRADIENT MESH BACKGROUND — animated
   Three soft orbs drift. Sits behind everything.
   ============================================================ */
.mesh {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.mesh::before,
.mesh::after,
.mesh > .orb {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.65;
  will-change: transform;
}
.mesh::before {
  width: 720px; height: 720px;
  left: -200px; top: -240px;
  background: radial-gradient(circle, var(--primary) 0%, transparent 65%);
  animation: drift1 24s ease-in-out infinite alternate;
}
.mesh::after {
  width: 640px; height: 640px;
  right: -180px; top: 8%;
  background: radial-gradient(circle, var(--accent) 0%, transparent 60%);
  opacity: 0.45;
  animation: drift2 28s ease-in-out infinite alternate;
}
.mesh > .orb {
  width: 540px; height: 540px;
  left: 30%; bottom: -240px;
  background: radial-gradient(circle, var(--primary-glow) 0%, transparent 65%);
  opacity: 0.35;
  animation: drift3 32s ease-in-out infinite alternate;
}
html[data-theme="light"] .mesh::before { opacity: 0.28; }
html[data-theme="light"] .mesh::after { opacity: 0.22; }
html[data-theme="light"] .mesh > .orb { opacity: 0.20; }
html[data-motion="minimal"] .mesh::before,
html[data-motion="minimal"] .mesh::after,
html[data-motion="minimal"] .mesh > .orb { animation: none; }

@keyframes drift1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(120px, 80px) scale(1.12); }
}
@keyframes drift2 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-100px, 60px) scale(1.08); }
}
@keyframes drift3 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(60px, -120px) scale(1.15); }
}

/* Faint grid noise on top of mesh — premium texture */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center;
  opacity: 0.35;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

/* ============================================================
   Reduced motion respect
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}