/* ============================================================
   inessarally.com — design tokens
   Direction: "night gravel" — headlights, dust, cold air, amber.
   Everything downstream reads from here. Never hardcode a colour,
   a step of the type scale or a duration outside this file.
   ============================================================ */

:root {
  /* --- surface ladder ---------------------------------------
     Five steps, each ~1 stop lighter. Depth comes from stacking
     these, not from big shadows. */
  --c-void: #060708;
  --c-base: #0b0c0e;
  --c-raise: #131519;
  --c-panel: #191c21;
  --c-edge: #262a31;
  --c-edge-soft: #1d2026;

  /* --- ink ------------------------------------------------- */
  --c-ink: #eceae5;
  --c-ink-dim: #a7abb3;
  --c-ink-mute: #6f757e;

  /* --- accent: headlight amber -----------------------------
     Used semantically: amber = live / active / primary action.
     Never as generic decoration. */
  --c-amber: #ffb020;
  --c-amber-hot: #ffc75a;
  --c-amber-deep: #b8760c;
  --c-amber-glow: rgb(255 176 32 / 0.16);

  /* --- signal ---------------------------------------------- */
  --c-live: #ff4d3d;
  --c-good: #57d98a;

  /* --- gravel dust (atmosphere layers) ---------------------- */
  --c-dust: rgb(255 210 150 / 0.05);
  --c-scrim: rgb(6 7 8 / 0.72);

  /* --- type ------------------------------------------------
     Two voices, both with full Cyrillic coverage — the site is
     bilingual, so a Latin-only face would silently drop Russian
     headings to a system fallback.

     Oswald   — the loud voice: condensed, sporty, all display.
     IBM Plex — the engineering voice: Sans for reading, Mono for
                every measured value (times, splits, positions). */
  --f-display: "Oswald", "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --f-body: "IBM Plex Sans", "Inter", system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* fluid scale — clamp(min, preferred, max) */
  --t-hero: clamp(4.5rem, 1rem + 17vw, 16rem);
  --t-d1: clamp(2.75rem, 1.4rem + 5.6vw, 7rem);
  --t-d2: clamp(2rem, 1.2rem + 3.2vw, 4rem);
  --t-d3: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  --t-lead: clamp(1.0625rem, 0.98rem + 0.5vw, 1.375rem);
  --t-body: clamp(0.9375rem, 0.9rem + 0.22vw, 1.0625rem);
  --t-small: 0.8125rem;
  --t-label: 0.6875rem;

  --lh-tight: 0.86;
  --lh-snug: 1.1;
  --lh-body: 1.62;

  --ls-label: 0.22em;
  --ls-display: -0.015em;

  /* --- rhythm ----------------------------------------------
     Deliberately uneven: sections breathe, cards stay compact. */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-section: clamp(5rem, 3rem + 9vw, 11rem);

  --w-page: 84rem;
  --w-text: 38rem;
  --pad-x: clamp(1.25rem, 0.5rem + 3.5vw, 4.5rem);

  /* --- geometry -------------------------------------------- */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 10px;
  --hair: 1px solid var(--c-edge);
  --hair-soft: 1px solid var(--c-edge-soft);

  /* --- motion ---------------------------------------------- */
  --d-fast: 140ms;
  --d-mid: 320ms;
  --d-slow: 720ms;
  --d-cine: 1200ms;
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* --- elevation ------------------------------------------- */
  --shadow-lift: 0 18px 40px -24px rgb(0 0 0 / 0.9);
  --shadow-pop: 0 32px 70px -30px rgb(0 0 0 / 1);

  --z-grain: 60;
  --z-nav: 70;
  --z-overlay: 90;

  --nav-h: 4.25rem;
}

/* The site is night-native. A light theme would fight the concept,
   so instead of inventing one we make the dark surface adapt to
   users who ask for more contrast. */
@media (prefers-contrast: more) {
  :root {
    --c-ink-dim: #cfd3d9;
    --c-ink-mute: #9aa0a8;
    --c-edge: #3c424b;
  }
}