/* =========================================================
   EOTECH Design System — Foundations
   Colors + Typography tokens
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600;700;800&family=Saira+Condensed:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---------- BRAND COLORS ---------- */
  /* Primary: EOTECH Copper — the brand's signature tone, used in the logo and accents. */
  --eo-copper:        #8E654C;
  --eo-copper-600:    #7A553F;
  --eo-copper-500:    #8E654C;
  --eo-copper-400:    #A57B5F;
  --eo-copper-300:    #BC9277;
  --eo-copper-200:    #D9B89D;
  --eo-copper-100:    #EFDDC9;
  --eo-copper-50:     #F8EFE3;

  /* Tactical neutrals — the dark gunmetal/charcoal range that dominates EOTECH visuals. */
  --eo-black:         #0A0A0A;
  --eo-ink:           #141414;     /* near-black background */
  --eo-coal:          #1C1C1C;     /* card surface on dark */
  --eo-graphite:      #2A2826;     /* warm graphite, photo shadow */
  --eo-gunmetal:      #3A3633;     /* warm dark neutral */
  --eo-steel:         #5A5552;
  --eo-stone:         #8A847F;
  --eo-fog:           #C9C4BE;
  --eo-bone:          #E8E3DC;     /* warm off-white */
  --eo-paper:         #F5F1EA;     /* warm paper, light bg */
  --eo-white:         #FFFFFF;

  /* Tan / desert — secondary kit color (EOTECH offers FDE/Tan product variants) */
  --eo-tan:           #B89968;
  --eo-tan-light:     #D4B98A;

  /* Semantic */
  --eo-success:       #5A7A3E;     /* olive drab green */
  --eo-warning:       #C8923A;     /* amber */
  --eo-danger:        #A33A2A;     /* muted brick red */
  --eo-reticle:       #FF2A1F;     /* simulated red dot reticle */

  /* ---------- SURFACES (semantic) ---------- */
  --bg:               var(--eo-paper);
  --bg-alt:           var(--eo-bone);
  --bg-inverse:       var(--eo-ink);
  --surface:          var(--eo-white);
  --surface-dark:     var(--eo-coal);
  --border:           rgba(20, 20, 20, 0.10);
  --border-strong:    rgba(20, 20, 20, 0.22);
  --border-dark:      rgba(255, 255, 255, 0.10);

  /* ---------- TEXT (semantic) ---------- */
  --fg1:              var(--eo-ink);          /* primary */
  --fg2:              var(--eo-gunmetal);     /* secondary */
  --fg3:              var(--eo-steel);        /* tertiary / meta */
  --fg-muted:         var(--eo-stone);
  --fg-inverse:       var(--eo-paper);
  --fg-on-copper:     var(--eo-white);
  --fg-accent:        var(--eo-copper);
  --link:             var(--eo-copper-600);

  /* ---------- TYPOGRAPHY ---------- */
  /* Display / brand voice — wide geometric sans, evokes the EOTECH wordmark.
     Saira is the closest free Google Fonts match to the wordmark's wide,
     squared, rounded-corner letterforms. (Substitution — see README.) */
  --font-display:     "Saira", "Eurostile", "Bank Gothic", Impact, sans-serif;
  --font-tactical:    "Saira Condensed", "Saira", "Oswald", Impact, sans-serif;
  --font-body:        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:        "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* Type scale (modular, body-anchored 16px) */
  --fs-12:    0.75rem;   /* 12 — micro / spec table */
  --fs-13:    0.8125rem; /* 13 — eyebrow */
  --fs-14:    0.875rem;  /* 14 — small */
  --fs-16:    1rem;      /* 16 — body */
  --fs-18:    1.125rem;  /* 18 — body large */
  --fs-20:    1.25rem;   /* 20 — lead */
  --fs-24:    1.5rem;
  --fs-32:    2rem;
  --fs-40:    2.5rem;
  --fs-56:    3.5rem;
  --fs-72:    4.5rem;
  --fs-96:    6rem;

  /* Line heights */
  --lh-tight:   1.05;
  --lh-display: 1.10;
  --lh-snug:    1.25;
  --lh-body:    1.55;
  --lh-loose:   1.7;

  /* Letter spacing — EOTECH uses uppercase, wide-tracked headings (military spec feel) */
  --ls-tight:    -0.01em;
  --ls-normal:    0;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;
  --ls-widest:   0.16em;   /* eyebrow / category labels */

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ---------- SPACING (4-pt grid) ---------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;

  /* ---------- RADII ---------- */
  /* EOTECH visual language is squared & engineered. Radii are restrained. */
  --r-0:  0;
  --r-1:  2px;
  --r-2:  4px;
  --r-3:  6px;
  --r-4:  8px;
  --r-pill: 999px;

  /* ---------- ELEVATION / SHADOWS ---------- */
  --shadow-sm:   0 1px 2px rgba(10, 10, 10, 0.08);
  --shadow-md:   0 4px 14px rgba(10, 10, 10, 0.10);
  --shadow-lg:   0 12px 32px rgba(10, 10, 10, 0.16);
  --shadow-xl:   0 24px 60px rgba(10, 10, 10, 0.24);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.06);
  --shadow-glow-copper: 0 0 0 3px rgba(142, 101, 76, 0.25);
  --shadow-glow-reticle: 0 0 12px rgba(255, 42, 31, 0.65);

  /* Borders */
  --bw-hair: 1px;
  --bw-rule: 2px;
  --bw-heavy: 3px;
}

/* =========================================================
   SEMANTIC TYPE STYLES
   Use these classes (or @apply via :where) on real elements.
   ========================================================= */

.eo-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--eo-copper);
}

.eo-h1, h1.eo {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-40), 5.5vw, var(--fs-72));
  font-weight: var(--fw-black);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--fg1);
}

.eo-h2, h2.eo {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-32), 4vw, var(--fs-56));
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--fg1);
}

.eo-h3, h3.eo {
  font-family: var(--font-display);
  font-size: var(--fs-32);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  color: var(--fg1);
}

.eo-h4, h4.eo {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg1);
}

.eo-lede {
  font-family: var(--font-body);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  font-weight: var(--fw-regular);
  color: var(--fg2);
}

.eo-body, p.eo {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--fg2);
}

.eo-small {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--fg3);
}

.eo-spec {
  /* Tactical product spec text — wide tracked, uppercase, monolinear */
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--fg3);
}

.eo-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  letter-spacing: 0;
  color: var(--fg2);
}

/* =========================================================
   UTILITY: dark surface text colors
   ========================================================= */
.on-dark { color: var(--fg-inverse); }
.on-dark .eo-eyebrow { color: var(--eo-copper-300); }
.on-dark .eo-body    { color: var(--eo-fog); }
.on-dark .eo-small   { color: var(--eo-stone); }

/* =========================================================
   BASE RESET (light)
   ========================================================= */
.eo-base {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.eo-base-dark {
  background: var(--bg-inverse);
  color: var(--fg-inverse);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}