/* ============================================================================
   puntcity.co — дизайн-токены (редизайн 2026-10)
   Новая айдентика: холодный индиго-лёд + электрический фиолетовый + золото.
   Дисплейный шрифт — Geist Mono (техно-моно вместо Archivo Black),
   радиусы крупнее, тени с оттенком индиго.
   ========================================================================= */

:root {
  /* ── Цвет ──────────────────────────────────────────────────────────────── */

  --color-ink: #101426;            /* чернильный индиго: текст, тёмные полосы, футер */
  --color-paper: #eef1f8;          /* ледяной фон страницы, текст на тёмном */
  --color-surface: #ffffff;        /* карточки и полосы */
  --color-white: #ffffff;          /* поля ввода, текст на брендовом */
  --color-brand: #6d28d9;          /* фиолетовый: CTA, ленты, акцентный текст */
  --color-brand-figma: #7c3aed;
  --color-flame: #818cf8;          /* ирисовый: support-полоса, панель героя, водяные знаки */
  --color-amber: #f59e0b;          /* золото: акцент на тёмном, нумерация */
  --color-muted: #565d75;          /* приглушённый текст */

  --color-brand-text: #5b21b6;
  --color-brand-on-dark: #a78bfa;
  --color-flame-text: #4f46e5;
  --color-amber-text: #b45309;
  --color-amber-strong: #d97706;

  /* Границы — чернильный индиго с прозрачностью */
  --color-line: #101426;
  --color-line-soft: rgba(16, 20, 38, .12);
  --color-line-softer: rgba(16, 20, 38, .06);
  --color-line-strong: rgba(16, 20, 38, .17);

  /* Статусы */
  --color-success: #10b981;
  --color-success-deep: #2e7d32;
  --color-success-bg: #e8f5e9;
  --color-warning: #ef6c00;
  --color-warning-bg: #fff3e0;
  --color-danger: var(--color-brand);

  /* Состояния */
  --color-brand-hover: #5b21b6;
  --color-brand-active: #4c1d95;
  --color-flame-hover: #6366f1;

  --color-amber-text: #b45309;
  --color-amber-heading: #d97706;
  --color-on-flame: var(--color-ink);
  --color-ink-hover: #1c2340;
  --color-surface-hover: #f2f5fd;
  --color-disabled-text: rgba(16, 20, 38, .38);
  --color-disabled-bg: rgba(16, 20, 38, .06);

  /* Фокус — фиолетовое кольцо */
  --focus-ring: 0 0 0 3px rgba(124, 58, 237, .40);
  --focus-outline: 3px solid rgba(124, 58, 237, .75);
  --focus-outline-on-dark: 3px solid rgba(245, 158, 11, .9);
  --focus-ring-on-dark: 0 0 0 3px rgba(245, 158, 11, .65);

  /* Подложки оверлеев */
  --scrim: rgba(9, 11, 24, .82);
  --scrim-soft: rgba(9, 11, 24, .62);

  /* ── Шрифты: моно-дисплей вместо гротеск-блока ────────────────────────── */
  --font-display: "Geist Mono", ui-monospace, "SF Mono", "Consolas", monospace;
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-narrow: "Archivo Narrow", "Arial Narrow", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Consolas", monospace;

  /* ── Типографика (шкала сохранена, роли те же) ─────────────────────────── */

  --fs-display: 64px;     --lh-display: 68px;
  --fs-h1: 58px;          --lh-h1: 62px;
  --fs-h2: 50px;          --lh-h2: 54px;
  --fs-h3: 40px;          --lh-h3: 44px;
  --fs-h4: 36px;          --lh-h4: 40px;
  --fs-h5: 30px;          --lh-h5: 34px;
  --fs-h6: 26px;          --lh-h6: 30px;
  --fs-title: 22px;       --lh-title: 26px;
  --fs-title-sm: 19px;    --lh-title-sm: 23px;
  --fs-label-lg: 18px;    --lh-label-lg: 20px;
  --fs-label: 16px;       --lh-label: 17px;
  --fs-label-sm: 14px;    --lh-label-sm: 15px;
  --fs-label-xs: 12px;    --lh-label-xs: 13px;

  --fs-body-lg: 16px;     --lh-body-lg: 26px;
  --fs-body: 14px;        --lh-body: 21px;
  --fs-body-tight: 14px;  --lh-body-tight: 18px;
  --fs-body-sm: 13px;     --lh-body-sm: 17px;
  --fs-body-xs: 12px;     --lh-body-xs: 16px;
  --fs-caption: 11px;     --lh-caption: 14px;
  --fs-micro: 10px;       --lh-micro: 13px;

  --fs-kicker: 14px;      --lh-kicker: 19px;
  --fs-kicker-sm: 13px;   --lh-kicker-sm: 18px;
  --fs-kicker-xs: 12px;   --lh-kicker-xs: 16px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  --ls-wide: .0625em;
  --ls-wider: .0769em;
  --ls-caps: .0455em;

  /* ── Пространство ───────────────────────────────────────────────────────── */

  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-9: 20px;
  --space-10: 24px;
  --space-11: 32px;
  --space-12: 40px;
  --space-13: 48px;
  --space-14: 64px;
  --space-15: 80px;

  --container: 1280px;
  --frame-desktop: 1440px;
  --gutter: 64px;
  --gutter-mobile: 16px;

  --h-utility-bar: 40px;
  --h-header: 84px;
  --h-ticker: 54px;

  /* ── Форма: мягкие радиусы вместо жёстких плашек ──────────────────────── */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 100px;

  /* ── Глубина: индиго-тени ─────────────────────────────────────────────── */
  --shadow-card: 0 6px 20px rgba(16, 20, 38, .10);
  --shadow-soft: 0 10px 30px rgba(49, 46, 129, .07);
  --shadow-raised: 0 16px 36px rgba(16, 20, 38, .22);
  --shadow-overlay: 0 18px 44px rgba(16, 20, 38, .26);
  --shadow-modal: 0 24px 56px rgba(9, 11, 24, .42);
  --shadow-deep: 0 18px 48px rgba(9, 11, 24, .5);
  --shadow-up: 0 -10px 36px rgba(16, 20, 38, .2);

  /* ── Слои ─────────────────────────────────────────────────────────────── */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-scrim: 400;
  --z-modal: 500;
  --z-agegate: 600;
  --z-toast: 700;

  /* ── Движение ─────────────────────────────────────────────────────────── */
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(.2, .6, .3, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}