/* ==========================================================================
   RailGuard Sentinel - tokeny
   Paleta wyprowadzona z logo PTS: granat, pomarańcz sygnałowy, biel.
   Pomarańcz zarezerwowany dla stanów żywych (sygnał, alert, aktywny krok).
   ========================================================================== */

:root {
  /* --- kolor ------------------------------------------------------------ */
  --ink: #08071a;
  --ink-raise: #100e2e;
  --navy: #221e5e;
  --navy-soft: #312c7a;
  --signal: #f16521;
  --signal-dim: #b8480f;
  --steel: #9aa2c9;
  --steel-dim: #8b93ba;
  /* Tekst ciągły na ciemnym tle. --steel dawał tam 5.9:1 przy 14 px, czyli
     powyżej progu WCAG, a mimo to akapity męczyły wzrok przy czytaniu całości.
     Ten wariant trzyma 9:1 i jest zarezerwowany dla dłuższych partii tekstu -
     etykiety i podpisy zostają na --steel, żeby hierarchia nie spłaszczyła się
     do jednej jasności. */
  --steel-bright: #c3c9e4;
  --paper: #f2f3f7;
  --paper-raise: #ffffff;
  --slate: #535c6d;
  --white: #ffffff;

  --hair-dark: rgba(154, 162, 201, 0.18);
  --hair-light: rgba(34, 30, 94, 0.12);
  --glow-signal: rgba(241, 101, 33, 0.35);

  /* --- typografia ------------------------------------------------------- */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;

  --wdth-wide: 112;
  --wdth-narrow: 78;

  --step-display: clamp(3rem, 8.4vw, 8rem);
  --step-h1: clamp(2.3rem, 5.2vw, 4.4rem);
  --step-h2: clamp(1.75rem, 3.4vw, 2.9rem);
  --step-h3: clamp(1.15rem, 1.5vw, 1.4rem);
  --step-body: clamp(1rem, 0.4vw + 0.9rem, 1.0625rem);
  --step-small: 0.875rem;
  --step-mono: 0.72rem;

  --track-mono: 0.18em;
  --track-tight: -0.03em;

  /* --- przestrzeń ------------------------------------------------------- */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --spine-w: 4.5rem;
  --measure: 34rem;
  --shell: 82rem;

  --pad-section: clamp(5rem, 11vh, 9rem);
  --nav-h: 4.25rem;

  /* --- ruch ------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-mid: 260ms;
  --dur-slow: 620ms;

  /* --- warstwy ---------------------------------------------------------- */
  --z-scene: 0;
  --z-content: 2;
  --z-spine: 40;
  --z-nav: 50;
  --z-overlay: 90;
}

@media (max-width: 60rem) {
  :root {
    --spine-w: 0rem;
    --nav-h: 3.75rem;
  }
}