/* ═══════════════════════════════════════════════════════════════
   NEW WAY — Sandbox of animation / interaction mockups
   Shared design system. Tokens lifted 1:1 from src/css/tokens.css
   so every demo reads as the real site. Self-contained (no @import).
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand blue (хром-синий, как в 3D-сцене) ───────── */
  --blue-50:  oklch(0.97 0.015 258);
  --blue-100: oklch(0.93 0.035 258);
  --blue-200: oklch(0.86 0.07 258);
  --blue-300: oklch(0.72 0.13 258);
  --blue-500: oklch(0.55 0.185 258);   /* primary */
  --blue-600: oklch(0.48 0.20 258);    /* hover   */
  --blue-700: oklch(0.40 0.19 258);
  --blue-900: oklch(0.23 0.10 258);
  --blue-950: oklch(0.16 0.07 258);

  /* ── Neutrals (cool molochny) ──────────────────────── */
  --bg:        #EFF0F2;
  --bg-soft:   #E7E9EC;
  --surface:   #FFFFFF;
  --ink-50:    #F4F5F7;
  --ink-100:   #E5E8EF;
  --ink-200:   #D2D7E0;
  --ink-300:   #B5BDCC;
  --ink-500:   #6B7388;
  --ink-700:   #2D3445;
  --ink-900:   #0B1220;

  /* ── Dark stage (как stat-bar в hero) ──────────────── */
  --night-900: #0A0F1A;
  --night-800: #10172A;
  --night-700: #1A2138;
  --night-600: #232C44;
  --night-line: rgba(255,255,255,0.08);

  /* ── Accent ────────────────────────────────────────── */
  --ok:        oklch(0.66 0.16 152);
  --ok-soft:   oklch(0.95 0.04 152);
  --warn:      oklch(0.72 0.16 70);

  /* ── Per-mode transport colours (for charts/maps) ──── */
  --air:  oklch(0.62 0.17 258);
  --road: oklch(0.64 0.15 200);
  --rail: oklch(0.62 0.15 300);
  --sea:  oklch(0.60 0.13 230);

  /* ── Lines & shadows ───────────────────────────────── */
  --line:        rgba(11, 18, 32, 0.08);
  --line-strong: rgba(11, 18, 32, 0.14);
  --shadow-sm:   0 1px 2px rgba(11, 18, 32, 0.05),
                 0 1px 1px rgba(11, 18, 32, 0.03);
  --shadow-md:   0 4px 12px rgba(11, 18, 32, 0.06),
                 0 2px 4px rgba(11, 18, 32, 0.04);
  --shadow-lg:   0 20px 40px -12px rgba(11, 18, 32, 0.12),
                 0 8px 16px -8px rgba(11, 18, 32, 0.08);
  --shadow-cta:  0 12px 24px -8px rgba(30, 80, 200, 0.45),
                 0 4px 8px -2px rgba(30, 80, 200, 0.30);

  /* ── Radius scale ──────────────────────────────────── */
  --r-xs:  6px;  --r-sm:  10px; --r-md:  14px; --r-lg:  20px;
  --r-xl:  28px; --r-2xl: 36px; --r-pill: 999px;

  --font-sans: 'Manrope', system-ui, -apple-system, sans-serif;
  --container: 1100px;
}

/* ── Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--ink-900);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; border: 0; background: 0; cursor: pointer; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
.container { width: min(100% - 48px, var(--container)); margin-inline: auto; }
.tnum { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* ═══ Sandbox chrome ════════════════════════════════════ */

/* top bar present on every demo page */
.sb-bar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 16px;
  height: 60px;
  padding: 0 24px;
  background: rgba(239, 240, 242, 0.82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line);
}
.sb-bar__back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; color: var(--ink-700);
  padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--surface); box-shadow: var(--shadow-sm);
  transition: transform .12s ease, color .12s ease;
}
.sb-bar__back:hover { color: var(--blue-500); transform: translateX(-2px); }
.sb-bar__brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -0.01em; }
.sb-bar__brand-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(140deg, var(--blue-500), var(--blue-700));
  display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 800;
}
.sb-bar__tag {
  margin-left: auto;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-500);
  padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--line);
}

/* page header block */
.sb-head { padding: 56px 0 8px; }
.sb-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blue-500); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;
}
.sb-eyebrow::before { content:''; width: 22px; height: 2px; background: var(--blue-500); }
.sb-title {
  font-size: clamp(32px, 5vw, 52px); font-weight: 800; line-height: 1.02;
  letter-spacing: -0.03em; margin: 0 0 16px; text-wrap: balance;
}
.sb-lead { max-width: 620px; font-size: 16.5px; color: var(--ink-500); line-height: 1.55; margin: 0; text-wrap: pretty; }

/* generic demo stage card */
.sb-stage {
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
  padding: 36px; margin: 40px 0;
}
.sb-stage--dark {
  background: linear-gradient(180deg, var(--night-800) 0%, var(--night-900) 100%);
  color: #fff; border-color: var(--night-line);
}
.sb-stage--pad-0 { padding: 0; overflow: hidden; }

.sb-section-label {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-500); margin: 0 0 4px;
}
.sb-section-title { font-size: 22px; font-weight: 800; letter-spacing: -0.015em; margin: 0 0 24px; }

/* "how it's built" note */
.sb-note {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--blue-50); border: 1px solid var(--blue-100);
  border-radius: var(--r-md); padding: 16px 18px; margin: 24px 0 0;
  font-size: 13.5px; line-height: 1.55; color: var(--ink-700);
}
.sb-note__icon { flex: 0 0 20px; color: var(--blue-500); margin-top: 1px; }
.sb-note code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  background: rgba(11,18,32,0.05); padding: 1px 6px; border-radius: 5px; }

/* segmented control (transport mode switch etc.) */
.sb-seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--ink-50);
  border: 1px solid var(--line); border-radius: var(--r-pill); }
.sb-seg__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: var(--r-pill);
  font-size: 13.5px; font-weight: 700; color: var(--ink-500);
  transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}
.sb-seg__btn svg { width: 16px; height: 16px; }
.sb-seg__btn[aria-pressed="true"] { background: var(--surface); color: var(--ink-900); box-shadow: var(--shadow-sm); }
.sb-seg__btn[aria-pressed="true"] svg { color: var(--blue-500); }

/* buttons */
.sb-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px; border-radius: var(--r-pill); font-weight: 700; font-size: 15px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.sb-btn--primary { background: linear-gradient(180deg, var(--blue-500), var(--blue-600)); color: #fff; box-shadow: var(--shadow-cta); }
.sb-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 16px 28px -8px rgba(30,80,200,.5); }
.sb-btn--ghost { background: var(--surface); color: var(--ink-900); box-shadow: var(--shadow-sm); }
.sb-btn--ghost:hover { background: var(--ink-50); }

.sb-footer { padding: 48px 0 64px; color: var(--ink-500); font-size: 13px; text-align: center; }

/* respect reduced motion globally (each demo also gates its JS) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}