/* ─────────────────────────────────────────────────────────────
   DESERT RECON — Design Tokens & Base
   Shared across all pages
───────────────────────────────────────────────────────────── */

/* Google Fonts: Space Grotesk */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* ── Palette */
  --obsidian:    #081424;   /* page background */
  --navy:        #0F1D33;   /* card / surface background */
  --navy-mid:    #162840;   /* card hover, raised surface */
  --orange:      #E0C097;   /* primary accent: headings, CTAs, icons */
  --orange-dim:  #C4A47A;   /* darker orange for borders / fills */
  --slate:       #4B5E6B;   /* borders, dividers, inactive states */
  --slate-light: #6B7F8C;   /* secondary borders */
  --parchment:   #E5E2DB;   /* primary text */
  --dust:        #8A959E;   /* secondary text, metadata labels */
  --dust-dim:    #5C6870;   /* dimmer UI chrome */
  --correct:     #4CAF7D;   /* success state */
  --wrong:       #E05555;   /* error state */

  /* ── Shape */
  --radius:      4px;

  /* ── Typography */
  --font:        'Space Grotesk', system-ui, sans-serif;
  --mono:        'Courier New', 'Lucida Console', monospace;

  /* ── Motion */
  --dur:         150ms;
  --ease:        linear;
}

/* ── Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html { scroll-behavior: smooth; }
img  { max-width: 100%; display: block; }
a    { color: inherit; text-decoration: none; }

/* ── Base body */
body {
  font-family: var(--font);
  background: var(--obsidian);
  color: var(--parchment);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  line-height: 1.6;
}

/* ── Topographic background texture */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Cpath d='M0,400 Q100,320 200,380 Q300,440 400,380 Q500,320 600,380 Q700,440 800,400' stroke='%23E0C097' stroke-width='0.5' fill='none' opacity='0.04'/%3E%3Cpath d='M0,340 Q100,260 200,320 Q300,380 400,320 Q500,260 600,320 Q700,380 800,340' stroke='%23E0C097' stroke-width='0.5' fill='none' opacity='0.04'/%3E%3Cpath d='M0,460 Q100,380 200,440 Q300,500 400,440 Q500,380 600,440 Q700,500 800,460' stroke='%23E0C097' stroke-width='0.5' fill='none' opacity='0.04'/%3E%3Cpath d='M0,280 Q100,200 200,260 Q300,320 400,260 Q500,200 600,260 Q700,320 800,280' stroke='%23E0C097' stroke-width='0.5' fill='none' opacity='0.03'/%3E%3Cpath d='M0,520 Q100,440 200,500 Q300,560 400,500 Q500,440 600,500 Q700,560 800,520' stroke='%23E0C097' stroke-width='0.5' fill='none' opacity='0.03'/%3E%3Cpath d='M0,200 Q200,100 400,200 Q600,300 800,200' stroke='%23E0C097' stroke-width='0.5' fill='none' opacity='0.025'/%3E%3Cpath d='M0,600 Q200,500 400,600 Q600,700 800,600' stroke='%23E0C097' stroke-width='0.5' fill='none' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

/* ── Utility: containers */
.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
}
.container-narrow {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 2rem);
}

/* ── Utility: data label (monospace metadata) */
.data-label {
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dust);
}

/* ── Utility: eyebrow */
.eyebrow {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
}

/* ── Utility: reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }