/* EaglEye Ballistics — design tokens
 * Instrument/optic aesthetic. Dark, precise, data-dense.
 */

:root {
  /* Brand palette — Olive Drab + Black + Gold/FDE */
  --gold: #C8A84E;            /* AccentGold — primary accent, CTAs, wordmark */
  --gold-2: #e0c068;
  --fde: #D9C89E;             /* Flat Dark Earth — secondary gold tone for body */
  --olive-darkest: #1a2017;   /* deepest olive, near-black */
  --olive-dark: #2B3320;      /* OliveDark — primary section bg */
  --olive-mid: #3a4429;       /* OliveMid — raised cards on olive */
  --olive-light: #4A5535;     /* OliveLight — hover states */
  --olive-pale: #8a9468;      /* muted olive for subtle text */
  --tan: #C2B280;             /* kept for reference */
  --navy: #1B2838;            /* kept for reference */

  /* Surfaces — now OLIVE-FIRST.
   * ink-0 is pure black (for black sections)
   * ink-1 is olive-dark (page bg + most sections)
   * ink-2 is olive-mid (cards/raised)
   * ink-3 is olive-light (hover)
   */
  --ink-0: #000000;           /* pure black band */
  --ink-1: #2B3320;           /* olive-drab page background */
  --ink-2: #3a4429;           /* olive raised surface */
  --ink-3: #4A5535;           /* olive hover */
  --ink-4: #5a6641;
  --hair: rgba(217,200,158,0.09);
  --hair-2: rgba(217,200,158,0.18);

  /* Text */
  --bone: #ecebe6;
  --bone-2: #D9C89E;          /* FDE tone for muted text/subheads */
  --bone-3: #a89d7a;          /* dim FDE */
  --bone-4: #6f6748;          /* dimmest */

  /* Legacy aliases kept so existing components still work */
  --reticle: #C8A84E;
  --reticle-2: #e0c068;
  --amber: #C8A84E;
  --amber-2: #e0c068;
  --steel: #4A5535;
  --moss: #2B3320;

  /* Radii */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 6px;

  /* Type */
  --f-display: "Archivo", "Arial Narrow", sans-serif;
  --f-body: "Inter", -apple-system, system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

/* Global base ---------------------------------------------------- */
.ee-scope {
  font-family: var(--f-body);
  color: var(--bone);
  background: var(--ink-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

.ee-scope * {
  box-sizing: border-box;
}

.ee-scope h1, .ee-scope h2, .ee-scope h3, .ee-scope h4 {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--bone);
}

.ee-scope .mono {
  font-family: var(--f-mono);
  font-feature-settings: "zero", "ss01";
}

.ee-scope .eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-3);
}

.ee-scope .rule {
  height: 1px;
  background: var(--hair);
  width: 100%;
}

.ee-scope .vrule {
  width: 1px;
  background: var(--hair);
  align-self: stretch;
}

/* Buttons -------------------------------------------------------- */
.ee-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--bone);
  color: var(--ink-0);
  border: none;
  border-radius: var(--r-sm);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.08s ease, background 0.15s ease;
}
.ee-btn:hover { background: #fff; transform: translateY(-1px); }
.ee-btn.ghost { background: transparent; color: var(--bone); box-shadow: inset 0 0 0 1px var(--hair-2); }
.ee-btn.ghost:hover { background: var(--ink-3); }
.ee-btn.reticle { background: var(--reticle); color: #fff; }
.ee-btn.reticle:hover { background: var(--reticle-2); }

/* Store badges (recreated, not copied) --------------------------- */
.ee-store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: #000;
  color: #fff;
  border-radius: var(--r-md);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
  transition: box-shadow 0.15s ease;
  min-width: 170px;
}
.ee-store:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5); }
.ee-store--compact {
  min-width: 0;
  width: 100%;
  padding: 9px 10px;
  gap: 8px;
}
.ee-store--compact svg { width: 18px; height: 22px; }
.ee-store--compact .ee-store-small { font-size: 8.5px; letter-spacing: 0.06em; }
.ee-store--compact .ee-store-big { font-size: 14px; letter-spacing: -0.005em; }
.ee-store .ee-store-label {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.ee-store .ee-store-small {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #bbb;
  text-transform: uppercase;
}
.ee-store .ee-store-big {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Chips / pills -------------------------------------------------- */
.ee-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone-2);
  background: var(--ink-2);
  border: 1px solid var(--hair);
  border-radius: 999px;
}
.ee-chip .ee-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--reticle);
  box-shadow: 0 0 0 3px rgba(195,52,43,0.18);
}

/* Data readout -------------------------------------------------- */
.ee-readout {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--bone-3);
}
.ee-readout .v { color: var(--bone); }
.ee-readout .k { color: var(--bone-4); }

/* Phone mockup frame -------------------------------------------- */
.ee-phone {
  background: #000;
  border-radius: 36px;
  padding: 10px;
  box-shadow:
    0 0 0 1.5px #2a3240,
    0 0 0 4px #0a0e13,
    0 40px 80px -20px rgba(0,0,0,0.8),
    0 20px 40px -10px rgba(0,0,0,0.6);
  position: relative;
}
.ee-phone::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 26px;
  background: #000;
  border-radius: 14px;
  z-index: 2;
}
.ee-phone-screen {
  border-radius: 28px;
  overflow: hidden;
  background: var(--ink-1);
  position: relative;
}