/* StrategAI — токены для HTML-прототипов (kit этапа E1.5) Источник правды: docs/design-system.md (v3.7) + docs/incoming/tokens__1_.css. ВАЖНО: в порте на Next.js (E2) эти переменные переезжают в @theme (Tailwind v4), шрифты — self-host через next/font (НЕ @import Google Fonts; 152-ФЗ + LCP). Здесь @import в самих прототипах — только для preview, в прод не идёт. */ :root { /* ── ORANGE — бренд-акцент (11 ступеней, base #F2731F · Pantone 165 C) ── */ --orange-50:#FEF5ED; --orange-100:#FDE6D0; --orange-200:#FCD0A4; --orange-300:#F8AB66; --orange-400:#F68F3D; --orange-500:#F2731F; --orange-600:#DB590E; --orange-700:#AF450F; --orange-800:#7F320D; --orange-900:#50220D; --orange-950:#2B130A; /* ── NEUTRALS — тёмная сцена (14 ступеней) ── */ --neutral-0:#FFFFFF; --neutral-100:#F5F5F5; --neutral-200:#E8E8E8; --neutral-300:#C9C9C9; --neutral-400:#909090; --neutral-500:#7A7A7A; --neutral-600:#666666; --neutral-700:#3D3D3D; --neutral-800:#1E1E1E; --neutral-900:#1A1A1A; --neutral-925:#141414; --neutral-950:#121212; --neutral-970:#0E0E0E; --neutral-1000:#070707; /* ── Семантические роли — DARK по умолчанию ── */ --bg-canvas:var(--neutral-1000); /* корневой фон страницы */ --bg-surface:var(--neutral-970); /* секции-банды (тональный ритм), карточки, header */ --bg-surface-raised:var(--neutral-950); /* карточки поверх surface, hover */ --text-primary:var(--neutral-0); --text-secondary:var(--neutral-200); --text-muted:var(--neutral-400); --text-dim:var(--neutral-600); --border:var(--neutral-900); --border-strong:var(--neutral-800); --accent:var(--orange-500); --accent-hover:var(--orange-600); --accent-contrast:var(--orange-700); /* ── LIGHT SCENE — кейсы / «белая бумага» (применять через .scene-light на ) ── */ --light-canvas:#F2F3F4; --light-surface:#FFFFFF; --light-surface-raised:#FAFBFC; --light-border:#E2E5E8; --light-border-strong:#C9CDD2; --light-text-primary:#0A0C0E; --light-text-secondary:#3A3D42; --light-text-muted:#6E727A; --light-text-dim:#9197A0; /* ── ATMOSPHERIC GLOW (rgba 242,115,31) ── */ --glow-subtle:rgba(242,115,31,0.05); --glow-soft:rgba(242,115,31,0.12); --glow-medium:rgba(242,115,31,0.22); --glow-strong:rgba(242,115,31,0.35); --glow-intense:rgba(242,115,31,0.55); /* ── СЕМАНТИЧЕСКИЕ (data-tables, метрики, статусы, формы; design-system §2.4) ── */ --success:#4CAF50; --success-strong:#2E7D32; --danger:#F44336; --warning:#FF9800; --info:#2196F3; /* ── SPACING — functional density (база 4px) ── */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px; /* ── РАДИУСЫ ── */ --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:10px; --r-2xl:14px; --r-full:9999px; /* ── MOTION ── */ --motion-fast:100ms; --motion-base:150ms; --motion-slow:220ms; --easing:cubic-bezier(0.4,0,0.2,1); --easing-decelerate:cubic-bezier(0,0,0.2,1); /* ── КОНТЕЙНЕРЫ ── */ --container:1280px; --container-reading:720px; --container-narrow:880px; --header-height:64px; /* ── ШРИФТЫ (preview: @import; прод: self-host next/font) ── */ --font-display:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif; --font-body:'Roboto',-apple-system,BlinkMacSystemFont,system-ui,sans-serif; --font-mono:'Roboto Mono','SF Mono',Menlo,Consolas,monospace; --font-logo:'JetBrains Mono','SF Mono',Menlo,monospace; } /* ── Применитель светлой сцены: навешивается на кейса/«белой бумаги». Переопределяет только семантические роли — компоненты остаются те же. ── */ .scene-light { --bg-canvas:var(--light-canvas); --bg-surface:var(--light-surface); --bg-surface-raised:var(--light-surface-raised); --text-primary:var(--light-text-primary); --text-secondary:var(--light-text-secondary); --text-muted:var(--light-text-muted); --text-dim:var(--light-text-dim); --border:var(--light-border); --border-strong:var(--light-border-strong); --accent-contrast:var(--orange-700); /* акцент текста на светлом — orange-700 */ } /* ── prefers-reduced-motion (DoD): гасим glow-pulse и transitions ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; } }