/* =====================================================================
   ДИЗАЙН-ТОКЕНЫ — цвета, шрифты, отступы. Меняйте здесь, а не в компонентах.
   Раскладка: тёмная сцена на всю ширину, секции по сетке с моно-индексом.
   ===================================================================== */
:root {
  /* фон и текст */
  --bg: #0b0a10;
  --bg-2: #110f18;
  --surface: #17151f;
  --ink: #f2efe8;
  --ink-soft: #cfcbd8;
  --muted: #8d8a99;
  --line: #262330;
  --on-accent: #0b0a10;

  /* маркерные акценты */
  --violet: #9b7bff;
  --lime: #c8ff3d;
  --coral: #ff5c7a;
  --cyan: #3fd9ff;
  --amber: #ffb547;

  /* шрифты */
  --f-display: Unbounded, "Arial Black", system-ui, sans-serif;
  --f-body: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  /* движение */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.77, 0, .18, 1);

  /* отступы по краям (с учётом «чёлки» телефона) */
  --gutter: clamp(18px, 3.2vw, 64px);
  --pad-l: max(var(--gutter), env(safe-area-inset-left, 0px));
  --pad-r: max(var(--gutter), env(safe-area-inset-right, 0px));

  color-scheme: dark;
}