/* ============================================================
 * German Military Equipment — Foundation tokens
 * Source of truth for color + type. Import this anywhere.
 * ============================================================ */

@font-face {
  font-family: "Russo One";
  src: url("./fonts/RussoOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Lato — full family, all weights and italics */
@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato-Thin.ttf") format("truetype");
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato-ThinItalic.ttf") format("truetype");
  font-weight: 100; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato-LightItalic.ttf") format("truetype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato-BoldItalic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato-Black.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato-BlackItalic.ttf") format("truetype");
  font-weight: 900; font-style: italic; font-display: swap;
}

:root {
  /* ── PRIMITIVE COLORS ─────────────────────────────────────── */

  /* Brand-defined */
  --color-black:        #000000;   /* primary background, dominant */
  --color-white:        #FFFFFF;   /* primary text on dark */
  --color-gray:         #535557;   /* secondary text / dividers */
  --color-tan:          #C49C75;   /* accent — restricted use */

  /* Neutral ramp — derived from black/gray/white; used for surfaces,
     borders, hairlines, OLED-style chrome. All cool neutrals. */
  --color-ink-0:        #000000;   /* pure black */
  --color-ink-1:        #0A0B0C;   /* near-black surface */
  --color-ink-2:        #131416;   /* card surface on black */
  --color-ink-3:        #1C1E20;   /* raised surface */
  --color-ink-4:        #26282B;   /* divider / heavy border */
  --color-ink-5:        #3A3C3F;   /* muted border */
  --color-ink-6:        #535557;   /* brand gray, secondary fg */
  --color-ink-7:        #7A7C7F;   /* tertiary fg / disabled */
  --color-ink-8:        #B6B8BB;   /* light gray on dark */
  --color-ink-9:        #E6E7E9;   /* light surface on dark */

  /* Tan variants — accent only */
  --color-tan-50:       #F4E9DC;
  --color-tan-100:      #E7D2B6;
  --color-tan-300:      #D4B594;
  --color-tan-500:      #C49C75;   /* brand tan */
  --color-tan-700:      #8E6F4F;
  --color-tan-900:      #4F3D2B;

  /* Semantic status — used sparingly, field/HUD context */
  --color-signal-on:    #6BCB6B;   /* link active / signal lock */
  --color-signal-warn:  #E0A93A;   /* caution */
  --color-signal-alert: #D24D3E;   /* fault / hostile */

  /* ── SEMANTIC COLORS ─────────────────────────────────────── */
  /* Default theme = dark (black-dominant). Use [data-theme="light"]
     on a container to invert for documents / print. */

  --bg:                 var(--color-black);
  --bg-elevated:        var(--color-ink-2);
  --bg-raised:          var(--color-ink-3);
  --bg-inverse:         var(--color-white);

  --fg:                 var(--color-white);
  --fg-muted:           var(--color-ink-8);
  --fg-subtle:          var(--color-ink-7);
  --fg-faint:           var(--color-ink-6);
  --fg-inverse:         var(--color-black);

  --border:             var(--color-ink-4);
  --border-strong:      var(--color-ink-5);
  --hairline:           rgba(255, 255, 255, 0.08);

  --accent:             var(--color-tan-500);
  --accent-strong:      var(--color-tan-300);
  --accent-faint:       rgba(196, 156, 117, 0.16);

  /* Focus / selection */
  --focus-ring:         var(--color-tan-300);

  /* ── SPACING ─────────────────────────────────────────────── */
  /* 4px base. Use these directly. */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ── RADII ───────────────────────────────────────────────── */
  /* Tight, mechanical. Avoid soft pillows. */
  --radius-0:  0;        /* default — most surfaces are sharp */
  --radius-1:  2px;
  --radius-2:  4px;      /* badges, small chips */
  --radius-3:  6px;      /* buttons, inputs */
  --radius-pill: 999px;  /* tags / status only */

  /* ── BORDERS ─────────────────────────────────────────────── */
  --stroke-1: 1px;
  --stroke-2: 2px;

  /* ── ELEVATION ───────────────────────────────────────────── */
  /* Minimal. The system is flat by default. Use only when a layer
     is genuinely floating (menu, toast, modal). */
  --shadow-0:  none;
  --shadow-1:  0 1px 0 rgba(0, 0, 0, 0.6), 0 0 0 1px var(--border);
  --shadow-2:  0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-3:  0 24px 48px rgba(0, 0, 0, 0.7);
  --shadow-inset-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* ── MOTION ──────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:     cubic-bezier(0.6, 0, 0.8, 0.2);
  --ease-mech:   cubic-bezier(0.4, 0.0, 0.2, 1);   /* mechanical */
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;

  /* ── TYPE PRIMITIVES ─────────────────────────────────────── */
  --font-display: "Russo One", "Oswald", "Arial Narrow", sans-serif;
  --font-body:    "Lato", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Scale (rem-relative). Display sizes lean LARGE on dark surfaces. */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-56: 56px;
  --fs-80: 80px;
  --fs-120: 120px;

  /* Line heights. Display is tight; body breathes. */
  --lh-tight:    1.04;
  --lh-snug:     1.2;
  --lh-base:     1.55;
  --lh-loose:    1.75;

  /* Letter spacing — display is set in caps, slightly tracked. */
  --ls-display:  0.04em;
  --ls-eyebrow:  0.18em;   /* uppercase eyebrows / section labels */
  --ls-caption:  0.08em;
  --ls-tabular:  0;
}

/* ── BASE ELEMENT STYLES ───────────────────────────────────── */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — Russo One, uppercase by default */
h1, .h1, h2, .h2, h3, .h3, .display, .product-name {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  text-wrap: balance;
}

h1, .h1 { font-size: 64px; }
h2, .h2 { font-size: 45px; }
h3, .h3 { font-size: var(--fs-32); }

/* Cover/page title — biggest mark on the page */
.cover-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-120);
  letter-spacing: var(--ls-display);
  line-height: 0.95;
  text-transform: uppercase;
}

/* Section heading */
.section-heading {
  font-family: var(--font-display);
  font-size: var(--fs-40);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-snug);
  text-transform: uppercase;
}

/* Product name — always consistent capitalization (Russo One title-case is OK) */
.product-name {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  letter-spacing: var(--ls-display);
}

/* Sub-heading — Lato Bold, sentence case */
h4, .h4, .sub-heading {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  letter-spacing: 0;
  text-transform: none;
}

/* Body */
p, .body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  text-wrap: pretty;
}
.body-lg { font-size: var(--fs-18); line-height: var(--lh-base); }
.body-sm { font-size: var(--fs-14); line-height: var(--lh-base); }

/* Eyebrow / overline — uppercase tracked Lato Black */
.eyebrow, .overline {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: var(--fs-12);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Caption / field label */
.caption, .field-label {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: var(--fs-12);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Data / spec value — tabular, Lato Bold */
.data, .spec-value {
  font-family: var(--font-body);
  font-weight: 700;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: var(--ls-tabular);
}

/* Fine print */
.fine-print, small {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-12);
  line-height: var(--lh-snug);
  color: var(--fg-subtle);
}

/* Mono / telemetry — used in spec tables and HUD displays */
.mono, code, kbd {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
}

/* Accent rule — Tan, used as a section divider */
.accent-rule {
  height: 2px;
  background: var(--accent);
  border: 0;
  width: 48px;
}

/* Selection */
::selection { background: var(--accent); color: var(--color-black); }