@charset "UTF-8";
/* Дизайн-токены C3PIO.
   Палитра снята с логотипа: сигнальный циан #01C4E2 (точка в центре диафрагмы)
   и тёплая бумага #FAFBF6 (фон исходного файла). Графит и золото — из
   бренд-заметок: «золотой + графит» как благородная техно-пара. */
:root {
  color-scheme: dark;
  /* Сигнал — основной акцент, взят пипеткой с логотипа */
  --signal: #01c4e2;
  --signal-bright: #5ce6f8;
  --signal-deep: #007e96;
  --signal-glow: rgba(1, 196, 226, 0.32);
  --signal-soft: rgba(1, 196, 226, 0.12);
  --signal-line: rgba(1, 196, 226, 0.24);
  /* Золото — вторичный акцент, дозировано: метрики, редкие подчёркивания */
  --gold: #e8b563;
  --gold-soft: rgba(232, 181, 99, 0.14);
  --fire-outer: color-mix(in srgb, var(--st-failed) 70%, var(--ink-900));
  --fire-core: color-mix(in srgb, var(--gold) 65%, var(--paper));
  /* Графит */
  --ink-950: #05070a;
  --ink-900: #080b10;
  --ink-850: #0b0f15;
  --ink-800: #10151d;
  --ink-750: #151c26;
  --ink-700: #1c2531;
  --ink-600: #2a3644;
  --paper: #fafbf6;
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;
  --font-display: "Jost", "Futura", "Century Gothic", -apple-system, sans-serif;
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Типографика тянется за вьюпортом — без брейкпоинтов на каждый размер */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-lg: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
  --fs-xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --fs-2xl: clamp(1.75rem, 1.45rem + 1.4vw, 2.5rem);
  --fs-3xl: clamp(2.25rem, 1.7rem + 2.6vw, 3.75rem);
  --fs-4xl: clamp(2.5rem, 1.85rem + 2.9vw, 4.25rem);
  --tracking-mono: 0.14em;
  --radius-sm: 4px;
  --radius: 10px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --container: 1240px;
  --header-h: 72px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.45s;
  --board-flight-min: 350ms;
  --board-flight-max: 600ms;
  --board-shift-dur: 350ms;
  --board-fade-dur: 250ms;
  --board-teleport-dur: 300ms;
  /* Тёмная тема — база бренда */
  --c-bg: var(--ink-950);
  --c-bg-soft: var(--ink-900);
  --c-surface: rgba(255, 255, 255, 0.028);
  --c-surface-strong: rgba(255, 255, 255, 0.05);
  --c-surface-elevated: var(--ink-800);
  --c-border: rgba(255, 255, 255, 0.09);
  --c-border-strong: rgba(255, 255, 255, 0.18);
  --c-text: #eef3f7;
  --c-text-muted: #8d9aa9;
  --c-text-dim: #8a96a3;
  --modal-backdrop: rgba(5, 7, 10, 0.72);
  --modal-backdrop-blur: 2px;
  --c-accent: var(--signal);
  --c-accent-hover: var(--signal-bright);
  --c-on-accent: #04191d;
  --c-grid: rgba(255, 255, 255, 0.045);
  --shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.85);
  --shadow-signal: 0 0 0 1px var(--signal-line), 0 18px 50px -24px var(--signal-glow);
  --fire-text-bg: var(--ink-800);
  --fire-heat: color-mix(in srgb, var(--st-failed) 32%, transparent);
}

/* Светлая тема — тёплая бумага логотипа, а не стерильный белый */
:root[data-theme=light] {
  color-scheme: light;
  --c-bg: var(--paper);
  --c-bg-soft: #f2f4ec;
  --c-surface: #ffffff;
  --c-surface-strong: #ffffff;
  --c-surface-elevated: #ffffff;
  --c-border: rgba(8, 11, 16, 0.12);
  --c-border-strong: rgba(8, 11, 16, 0.24);
  --c-text: #080b10;
  --c-text-muted: #55606d;
  --c-text-dim: #5b6570;
  --modal-backdrop: rgba(5, 7, 10, 0.82);
  --c-accent: var(--signal-deep);
  --c-accent-hover: #00647a;
  --c-on-accent: #ffffff;
  --c-grid: rgba(8, 11, 16, 0.05);
  --signal-soft: rgba(1, 196, 226, 0.1);
  --signal-line: rgba(0, 126, 150, 0.28);
  --shadow: 0 20px 45px -22px rgba(8, 11, 16, 0.28);
  --shadow-signal: 0 0 0 1px var(--signal-line), 0 18px 44px -26px rgba(0, 126, 150, 0.5);
  --fire-text-bg: #ffffff;
  --fire-heat: color-mix(in srgb, var(--st-failed) 24%, transparent);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark]) {
    color-scheme: light;
    --c-bg: var(--paper);
    --c-bg-soft: #f2f4ec;
    --c-surface: #ffffff;
    --c-surface-strong: #ffffff;
    --c-surface-elevated: #ffffff;
    --c-border: rgba(8, 11, 16, 0.12);
    --c-border-strong: rgba(8, 11, 16, 0.24);
    --c-text: #080b10;
    --c-text-muted: #55606d;
    --c-text-dim: #5b6570;
    --modal-backdrop: rgba(5, 7, 10, 0.82);
    --c-accent: var(--signal-deep);
    --c-accent-hover: #00647a;
    --c-on-accent: #ffffff;
    --c-grid: rgba(8, 11, 16, 0.05);
    --signal-soft: rgba(1, 196, 226, 0.1);
    --signal-line: rgba(0, 126, 150, 0.28);
    --shadow: 0 20px 45px -22px rgba(8, 11, 16, 0.28);
    --shadow-signal: 0 0 0 1px var(--signal-line), 0 18px 44px -26px rgba(0, 126, 150, 0.5);
    --fire-text-bg: #ffffff;
    --fire-heat: color-mix(in srgb, var(--st-failed) 24%, transparent);
  }
}