/* Фантом Такелаж — Design System v2.0 · MILITARY TACTICAL DARK
   Tokens: palette, typography, spacing, radii, container. */

/* Metric-matched fallback fonts.
   When a Google webfont hasn't loaded yet (or never will, with font-display:
   optional), the browser uses this fallback. The ascent / descent / line-gap
   / size-adjust overrides make Arial render at the same x-height and line
   height as the real font — so when the webfont DOES arrive, there is no
   visible reflow ("jump") on the page.
   Metrics from Vercel's @next/font internal table. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  ascent-override: 90.49%;
  descent-override: 22.56%;
  line-gap-override: 0%;
  size-adjust: 107.40%;
}
@font-face {
  font-family: 'Oswald Fallback';
  src: local('Arial');
  ascent-override: 113.67%;
  descent-override: 32.65%;
  line-gap-override: 0%;
  size-adjust: 88.41%;
}

:root {
  /* Tactical Dark — основна сцена */
  --color-bg:           #252B2D;
  --color-bg-deep:      #1D2123;
  --color-surface:      #2F3633;
  --color-surface-2:    #3A413E;
  --color-input-bg:     #1F2425;

  /* Olive / Khaki — вторинна brand-палітра */
  --color-olive:        #3D4A2C;
  --color-olive-light:  #6B7A4F;
  --color-khaki:        #A89968;
  --color-khaki-dim:    #5A4F2E;

  /* Бордери */
  --color-border:       #424B47;
  --color-border-2:     #525C56;
  --color-border-dash:  #5E6960;

  /* Акцент */
  --color-accent:       #F59E0B;
  --color-accent-hover: #D97706;
  --color-accent-soft:  rgba(245,158,11,0.14);
  --color-accent-text:  #1A1006;

  /* Hazard / попередження */
  --color-hazard:       #F0C808;
  --color-hazard-soft:  rgba(240,200,8,0.14);
  --color-blood:        #7A1D1D;
  --color-blood-soft:   rgba(122,29,29,0.18);

  /* Текст */
  --color-text:         #E8E4D8;
  --color-text-muted:   #A8AB9A;
  --color-text-dim:     #6E7363;
  --color-text-placeholder: #4E5347;

  /* Світла сцена (privacy/terms) */
  --color-light-bg:     #E8E4D8;
  --color-light-surface:#F2EFE4;
  --color-light-text:   #1A1F1C;
  --color-light-muted:  #4A5044;
  --color-light-border: #C4BFAC;

  /* Статуси */
  --color-ok:           #6B8E4E;
  --color-warn:         #F0C808;
  --color-fail:         #B4361F;

  /* Backward-compat aliases (для існуючого коду, поступово виводимо) */
  --color-bg-primary:   var(--color-bg);
  --color-bg-surface:   var(--color-surface);
  --color-bg-light:     var(--color-light-bg);
  --color-bg-input:     var(--color-input-bg);
  --color-border-strong:var(--color-border-2);
  --color-success-text: var(--color-ok);
  --color-danger:       var(--color-fail);
  --color-success:      var(--color-ok);
  --color-success-soft: rgba(107,142,78,0.18);
  --color-text-dark:    var(--color-light-text);
  --color-text-dark-muted: var(--color-light-muted);
  --color-border-light: var(--color-light-border);
  --color-bg-light-surface: var(--color-light-surface);

  /* Fonts */
  --font-display: 'Oswald', 'Oswald Fallback', system-ui, -apple-system, sans-serif;
  --font-stencil: 'Stardos Stencil', monospace;
  --font-body:    'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Backward-compat (old code used --font-heading) */
  --font-heading: var(--font-display);

  /* Space */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* Radii — sharp military */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 6px;
  --radius-full: 9999px;

  --container-max: 1200px;
  --container-pad: 24px;

  /* Tactical grid background — for hero */
  --grid-tactical:
    linear-gradient(to right, rgba(168,153,104,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(168,153,104,0.05) 1px, transparent 1px);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Reserve space for the vertical scrollbar even on short pages.
     Prevents horizontal "jump" when navigating between pages whose
     content does/doesn't overflow the viewport. */
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
@media (max-width: 768px) {
  .container { padding: 0 16px; }
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-bg-deep);
  color: var(--color-text);
  padding: 10px 14px;
  z-index: 1000;
  border-radius: 0 0 var(--radius-md) 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 0; outline: 0; box-shadow: 0 0 0 3px rgba(245,158,11,0.5); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}