/* Tracer — base stylesheet v3
 * Consumes brand-tokens.css. Always load brand-tokens.css first.
 * Used by one-pagers, presentations, and the site.
 * Security: no external fonts, no CDN, everything local.
 */

@import "./brand-tokens.css";

/* ==========================================================================
   @font-face — self-hosted
   Paths assume fonts in shared/fonts/. See shared/fonts/README.md for sources.
   font-display: swap → graceful fallback to system fonts while loading.
   ========================================================================== */

/* e-Ukraine Head — display face */
@font-face {
  font-family: "e-Ukraine Head";
  src: url("../fonts/e-ukraine/e-UkraineHead-Bold.woff2") format("woff2"),
       url("../fonts/e-ukraine/e-UkraineHead-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "e-Ukraine Head";
  src: url("../fonts/e-ukraine/e-UkraineHead-Regular.woff2") format("woff2"),
       url("../fonts/e-ukraine/e-UkraineHead-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* e-Ukraine — body face */
@font-face {
  font-family: "e-Ukraine";
  src: url("../fonts/e-ukraine/e-Ukraine-Regular.woff2") format("woff2"),
       url("../fonts/e-ukraine/e-Ukraine-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "e-Ukraine";
  src: url("../fonts/e-ukraine/e-Ukraine-Medium.woff2") format("woff2"),
       url("../fonts/e-ukraine/e-Ukraine-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "e-Ukraine";
  src: url("../fonts/e-ukraine/e-Ukraine-Bold.woff2") format("woff2"),
       url("../fonts/e-ukraine/e-Ukraine-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* JetBrains Mono — specs, technical annotations */
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Reset
   ========================================================================== */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ==========================================================================
   Typography
   v2 change: headings no longer default UPPERCASE. Only eyebrows are uppercase.
   This is a deliberate move away from the condensed-uppercase defense cliché.
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--s-3);
  color: var(--color-text);
}

h1 { font-size: var(--fs-h1); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: var(--ls-normal); }

p {
  margin: 0 0 var(--s-3);
  max-width: 65ch;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
a:hover { border-bottom-color: var(--color-accent); }

strong { font-weight: 600; color: var(--color-text); }
em { font-style: italic; }

.muted { color: var(--color-text-muted); }
.accent { color: var(--color-accent); }
.accent-2 { color: var(--color-accent-2); }
.alert { color: var(--color-alert); }

.eyebrow {
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-accent);
  margin-bottom: var(--s-2);
}

/* Monospace for specs, technical annotations, numbers, footnotes */
.mono, code, .spec, .source {
  font-family: var(--font-mono);
  font-size: var(--fs-spec);
  font-variant-numeric: tabular-nums;
}

/* Source/evidence footnote line */
.source {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ==========================================================================
   Layout utilities
   ========================================================================== */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--s-7) var(--s-6);
}

.content { max-width: var(--content-column); }

.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .container { padding: var(--s-5) var(--s-4); }
}

.divider {
  border: none;
  border-top: var(--border-hairline);
  margin: var(--s-6) 0;
}

/* ==========================================================================
   Cards and surfaces
   ========================================================================== */
.card {
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: var(--s-4);
}

.card--accent {
  border-left: 2px solid var(--color-accent);
}

.card--amber {
  border-left: 2px solid var(--color-accent-2);
}

/* ==========================================================================
   Spec tables — monolingual labels, monospace values
   v3: bilingual EN/UA rows rule removed — spec tables now use one language,
   matching the surrounding material.
   Usage:
   <table class="spec-table">
     <tr>
       <td class="spec-label">Payload</td>
       <td class="spec-value">3 000 g</td>
     </tr>
   </table>
   ========================================================================== */
table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
}

th, td {
  padding: var(--s-3);
  border-bottom: var(--border-hairline);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
}

.spec-table {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-spec);
}

.spec-table td {
  padding: var(--s-2) var(--s-3);
}

.spec-label {
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  width: 60%;
}

.spec-value {
  color: var(--color-accent);
  text-align: right;
  font-weight: 500;
}

/* ==========================================================================
   Field log / combat provenance block
   v2: new brand convention
   ========================================================================== */
.field-log {
  border-left: 2px solid var(--color-accent);
  padding: var(--s-3) var(--s-4);
  margin: var(--s-4) 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-text);
  background: var(--color-surface);
}

.field-log__header {
  font-size: 0.72rem;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: var(--s-2);
}

.field-log__line {
  margin: var(--s-1) 0;
  color: var(--color-text-muted);
}

.field-log__line strong {
  color: var(--color-text);
  font-weight: 500;
}

/* ==========================================================================
   Print — clean PDF exports
   Single-page layout with full-bleed dark background preserved.
   ========================================================================== */
@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  html, body {
    background: var(--color-bg) !important;
    color: var(--color-text);
  }
  .no-print { display: none !important; }
  a { color: var(--color-accent); text-decoration: none; }
  /* Prevent columns/grids from breaking across pages */
  .hero, .grid, .field-log, .footer-cta, section, header, figure, table {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  @page { margin: 0; }
}