/* ============================================================================ * AI Factory · Командный центр — 5 ДИЗАЙН-СИСТЕМ (Фаза 4) * ---------------------------------------------------------------------------- * Один файл, пять независимых наборов токенов, каждый scoped под классом: * .ds-a Neo Mission Control — тёмный graphite + сигнальный янтарь (терминал) * .ds-b Aurora Glass — сумеречный градиент + иридесцентное стекло * .ds-c Editorial Calm — крем/бумага + чернила + вермильон (serif) * .ds-d Kinetic Futurism — чёрный + электрический лайм/циан (движение) * .ds-e Brutalist Data — бумага + чёрный + safety-orange (моно, грани) * .ds-f Aurora Glass · Clear — светлое воздушное стекло, прохладный голубой * .ds-g Aurora Glass · Greige — тёплый серо-бежевый, песочные акценты, стекло * .ds-h Aurora Glass · Ember — тёмное дымчатое стекло + янтарное HUD-свечение * .ds-i Aurora Glass · Ember Live — серое стекло + пастельный тёплый glow, max-движение * * (f/g/h/i — новые вариации семейства Aurora Glass; добавлены поверх, не * меняя ни одной из пяти исходных систем a–e. i — близнец h с серым стеклом, * пастельными тёплыми тонами и усиленной анимацией.) * * Портативность (Фаза 5/8): прототип может либо подключить этот файл и повесить * класс .ds-x на , либо скопировать свой блок, переименовав селектор в :root. * Все компоненты читают только переменные --ds-*; смена системы = смена класса. * ========================================================================== */ /* — Шрифты ----------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Archivo:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,800&family=Spline+Sans:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600&family=Sora:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&family=Anton&family=Space+Mono:wght@400;700&display=swap'); @import url('https://api.fontshare.com/v2/css?f[]=clash-display@500,600,700&f[]=general-sans@400,500,600,700&display=swap'); /* — Общие примитивы (наследуются всеми системами) -------------------------- */ :where(.ds-a, .ds-b, .ds-c, .ds-d, .ds-e, .ds-f, .ds-g, .ds-h, .ds-i) { --ds-ease-out: cubic-bezier(.22, 1, .36, 1); --ds-ease-in-out: cubic-bezier(.65, 0, .35, 1); --ds-ease-spring: cubic-bezier(.34, 1.56, .64, 1); --ds-dur-fast: 140ms; --ds-dur: 240ms; --ds-dur-slow: 520ms; --ds-stagger: 60ms; /* шаг каскадного появления при первой загрузке */ --ds-space: 4px; /* базовая единица сетки (8pt с под-шагом 4) */ --ds-tone-success: var(--ds-success); --ds-tone-active: var(--ds-accent); --ds-tone-warn: var(--ds-warn); --ds-tone-danger: var(--ds-danger); --ds-tone-muted: var(--ds-text-muted); } /* ========================================================================== * A · NEO MISSION CONTROL — refined dark, точная сетка, сигнальный янтарь * Настроение: пульт управления, CRT-янтарь/зелень, плотно, но читабельно. * ======================================================================== */ .ds-a { color-scheme: dark; /* фон/слои */ --ds-bg: #0a0d14; --ds-bg-grid: rgba(255,255,255,.035); --ds-surface: #11161f; --ds-surface-2: #161d28; --ds-surface-3: #1d2531; --ds-border: #232c3a; --ds-border-strong: #34415a; /* текст */ --ds-text: #e6ecf5; --ds-text-secondary:#a7b3c6; --ds-text-muted: #6b7890; /* акценты */ --ds-accent: #ffb020; /* сигнальный янтарь */ --ds-accent-2: #4ea8ff; /* холодный info-azure (скупо) */ --ds-accent-soft: rgba(255,176,32,.14); --ds-on-accent: #0a0d14; /* текст на акцентной заливке */ --ds-success: #39d98a; --ds-warn: #ffb020; --ds-danger: #ff5c5c; --ds-info: #4ea8ff; /* данные/графики */ --ds-chart-1: #ffb020; --ds-chart-2: #4ea8ff; --ds-chart-3: #39d98a; --ds-chart-4: #b388ff; --ds-chart-5: #ff7a9c; --ds-chart-6: #5ad1c9; --ds-chart-grid: rgba(255,255,255,.06); --ds-chart-track: rgba(255,255,255,.07); /* типографика */ --ds-font-display: 'Space Grotesk', system-ui, sans-serif; --ds-font-body: 'Archivo', system-ui, sans-serif; --ds-font-mono: 'IBM Plex Mono', ui-monospace, monospace; --ds-num-font: var(--ds-font-mono); /* числа — моно (выравнивание) */ --ds-num-feat: 'tnum' 1, 'zero' 1; --ds-display-tracking: -0.01em; --ds-display-weight: 600; /* форма */ --ds-radius: 8px; --ds-radius-sm: 5px; --ds-radius-pill: 999px; --ds-border-w: 1px; /* высота/тени */ --ds-shadow-1: 0 1px 0 rgba(255,255,255,.03) inset, 0 6px 18px rgba(0,0,0,.45); --ds-shadow-2: 0 14px 40px rgba(0,0,0,.55); --ds-glow: 0 0 0 1px var(--ds-accent-soft), 0 0 24px rgba(255,176,32,.18); --ds-blur: 0px; --ds-app-bg: radial-gradient(120% 80% at 80% -10%, #14202e 0%, transparent 55%), var(--ds-bg); } /* ========================================================================== * B · AURORA GLASS — премиальный глассморфизм, сумеречный градиент, стекло * Настроение: visionOS / AR-стекло, фрост-панели, тёплый champagne-свет. * ======================================================================== */ .ds-b { color-scheme: dark; --ds-bg: #14121f; --ds-bg-grid: rgba(255,255,255,.05); /* стеклянные поверхности — полупрозрачные, опираются на backdrop-blur */ --ds-surface: rgba(255,255,255,.07); --ds-surface-2: rgba(255,255,255,.11); --ds-surface-3: rgba(255,255,255,.16); --ds-border: rgba(255,255,255,.14); --ds-border-strong: rgba(255,255,255,.28); --ds-text: #f3eef7; --ds-text-secondary:#d6cfe0; --ds-text-muted: #a99fb8; --ds-accent: #ffb27a; /* champagne / персик */ --ds-accent-2: #b794ff; /* лиловое сияние */ --ds-accent-soft: rgba(255,178,122,.18); --ds-on-accent: #1a1726; /* текст на акцентной заливке */ --ds-success: #7be0b0; --ds-warn: #ffcf6b; --ds-danger: #ff8a9b; --ds-info: #8fb8ff; --ds-chart-1: #ffb27a; --ds-chart-2: #b794ff; --ds-chart-3: #7bd6ff; --ds-chart-4: #7be0b0; --ds-chart-5: #ff9bc4; --ds-chart-6: #ffcf6b; --ds-chart-grid: rgba(255,255,255,.10); --ds-chart-track: rgba(255,255,255,.12); --ds-font-display: 'Clash Display', system-ui, sans-serif; --ds-font-body: 'General Sans', system-ui, sans-serif; --ds-font-mono: 'Spline Sans Mono', ui-monospace, monospace; --ds-num-font: var(--ds-font-display); --ds-num-feat: 'tnum' 1; --ds-display-tracking: -0.015em; --ds-display-weight: 600; --ds-radius: 20px; --ds-radius-sm: 14px; --ds-radius-pill: 999px; --ds-border-w: 1px; --ds-shadow-1: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 30px rgba(0,0,0,.35); --ds-shadow-2: 0 24px 70px rgba(0,0,0,.45); --ds-glow: 0 0 40px rgba(183,148,255,.25); --ds-blur: 22px; /* backdrop-filter: blur(var(--ds-blur)) */ /* живой сумеречный фон под стеклом */ --ds-app-bg: radial-gradient(60% 50% at 12% 8%, rgba(255,178,122,.40) 0%, transparent 60%), radial-gradient(55% 45% at 88% 14%, rgba(183,148,255,.38) 0%, transparent 60%), radial-gradient(70% 60% at 50% 110%, rgba(123,214,255,.30) 0%, transparent 55%), linear-gradient(160deg, #1a1726 0%, #120f1c 100%); } /* ========================================================================== * C · EDITORIAL CALM — светлый, воздушный, журнальная типографика, serif * Настроение: премиальный журнал, тихие красивые графики, много воздуха. * ======================================================================== */ .ds-c { color-scheme: light; --ds-bg: #f7f4ee; /* тёплая бумага */ --ds-bg-grid: rgba(20,18,14,.05); --ds-surface: #fffdf8; --ds-surface-2: #f1ece2; --ds-surface-3: #e8e1d4; --ds-border: #e3dccd; --ds-border-strong: #cbbfa8; --ds-text: #1a1813; /* чернила */ --ds-text-secondary:#5c5648; --ds-text-muted: #938b78; --ds-accent: #d8442b; /* вермильон */ --ds-accent-2: #1f6f5c; /* приглушённый бутылочный */ --ds-accent-soft: rgba(216,68,43,.10); --ds-on-accent: #fffdf8; /* текст на акцентной заливке */ --ds-success: #2f7d51; --ds-warn: #c98a1e; --ds-danger: #c0392b; --ds-info: #2c6e9b; --ds-chart-1: #d8442b; --ds-chart-2: #1f6f5c; --ds-chart-3: #c98a1e; --ds-chart-4: #2c6e9b; --ds-chart-5: #7d5a9c; --ds-chart-6: #a8694a; --ds-chart-grid: rgba(20,18,14,.08); --ds-chart-track: rgba(20,18,14,.07); --ds-font-display: 'Fraunces', Georgia, serif; --ds-font-body: 'Spline Sans', system-ui, sans-serif; --ds-font-mono: 'Spline Sans Mono', ui-monospace, monospace; --ds-num-font: var(--ds-font-display); --ds-num-feat: 'tnum' 1, 'ss01' 1; --ds-display-tracking: -0.01em; --ds-display-weight: 600; --ds-radius: 4px; --ds-radius-sm: 3px; --ds-radius-pill: 999px; --ds-border-w: 1px; --ds-shadow-1: 0 1px 2px rgba(40,33,20,.06), 0 8px 24px rgba(40,33,20,.06); --ds-shadow-2: 0 18px 48px rgba(40,33,20,.10); --ds-glow: none; --ds-blur: 0px; --ds-app-bg: var(--ds-bg); } /* ========================================================================== * D · KINETIC FUTURISM — bold, motion-led, электрический лайм/циан * Настроение: энергия, анимированные данные, динамичные переходы, крупные числа. * ======================================================================== */ .ds-d { color-scheme: dark; --ds-bg: #07090c; --ds-bg-grid: rgba(198,244,50,.06); --ds-surface: #0e1318; --ds-surface-2: #131a21; --ds-surface-3: #1a232c; --ds-border: #20303a; --ds-border-strong: #2f4a4f; --ds-text: #ecfff4; --ds-text-secondary:#9fbcb2; --ds-text-muted: #5f7b76; --ds-accent: #c6f432; /* электрический лайм */ --ds-accent-2: #18e0ff; /* циан */ --ds-accent-soft: rgba(198,244,50,.14); --ds-on-accent: #07090c; /* текст на акцентной заливке */ --ds-success: #5df2a6; --ds-warn: #ffd23f; --ds-danger: #ff4d6d; --ds-info: #18e0ff; --ds-chart-1: #c6f432; --ds-chart-2: #18e0ff; --ds-chart-3: #5df2a6; --ds-chart-4: #ff4d6d; --ds-chart-5: #ffd23f; --ds-chart-6: #9d7bff; --ds-chart-grid: rgba(255,255,255,.06); --ds-chart-track: rgba(255,255,255,.08); --ds-font-display: 'Sora', system-ui, sans-serif; --ds-font-body: 'Manrope', system-ui, sans-serif; --ds-font-mono: 'JetBrains Mono', ui-monospace, monospace; --ds-num-font: var(--ds-font-display); --ds-num-feat: 'tnum' 1; --ds-display-tracking: -0.03em; --ds-display-weight: 800; --ds-radius: 14px; --ds-radius-sm: 9px; --ds-radius-pill: 999px; --ds-border-w: 1px; --ds-shadow-1: 0 0 0 1px rgba(198,244,50,.08), 0 10px 30px rgba(0,0,0,.5); --ds-shadow-2: 0 20px 60px rgba(0,0,0,.6); --ds-glow: 0 0 30px rgba(198,244,50,.30), 0 0 60px rgba(24,224,255,.15); --ds-blur: 6px; --ds-app-bg: radial-gradient(80% 60% at 100% 0%, rgba(24,224,255,.10) 0%, transparent 50%), radial-gradient(70% 60% at 0% 100%, rgba(198,244,50,.08) 0%, transparent 50%), var(--ds-bg); } /* ========================================================================== * E · BRUTALIST DATA — высокий контраст, сырая сетка, гигантские числа * Настроение: утилитарный характер, видимые границы, моно, нулевые радиусы. * ======================================================================== */ .ds-e { color-scheme: light; --ds-bg: #ece9e2; /* газетная бумага */ --ds-bg-grid: rgba(0,0,0,.07); --ds-surface: #f6f4ee; --ds-surface-2: #ffffff; --ds-surface-3: #e2ded3; --ds-border: #161412; /* жирная чёрная граница — характер */ --ds-border-strong: #000000; --ds-text: #100f0d; --ds-text-secondary:#3b3833; --ds-text-muted: #6f6a60; --ds-accent: #ff4d00; /* safety / construction orange */ --ds-accent-2: #1a4cff; /* контрастный ультрамарин */ --ds-accent-soft: rgba(255,77,0,.12); --ds-on-accent: #ffffff; /* текст на акцентной заливке */ --ds-success: #007a3d; --ds-warn: #c25e00; --ds-danger: #d11500; --ds-info: #1a4cff; --ds-chart-1: #ff4d00; --ds-chart-2: #1a4cff; --ds-chart-3: #100f0d; --ds-chart-4: #007a3d; --ds-chart-5: #c25e00; --ds-chart-6: #8a00d4; --ds-chart-grid: rgba(0,0,0,.14); --ds-chart-track: rgba(0,0,0,.10); --ds-font-display: 'Anton', 'Archivo', system-ui, sans-serif; /* гигантские числа/заголовки */ --ds-font-body: 'Space Mono', ui-monospace, monospace; --ds-font-mono: 'Space Mono', ui-monospace, monospace; --ds-num-font: var(--ds-font-display); --ds-num-feat: 'tnum' 1; --ds-display-tracking: 0.01em; --ds-display-weight: 400; --ds-radius: 0px; --ds-radius-sm: 0px; --ds-radius-pill: 0px; --ds-border-w: 2px; --ds-shadow-1: 4px 4px 0 #100f0d; /* жёсткая офсет-тень вместо мягкой */ --ds-shadow-2: 8px 8px 0 #100f0d; --ds-glow: none; --ds-blur: 0px; --ds-app-bg: var(--ds-bg); } /* ========================================================================== * F · AURORA GLASS · CLEAR — светлое, воздушное, максимально прозрачное стекло * Настроение: «свежий воздух», невесомые фрост-панели на светлом фоне, * тонкие 1px-хайрлайны, прохладные голубые акценты, много воздуха. * Эволюция .ds-b в светлую сторону. Структура/компоненты — те же. * ======================================================================== */ .ds-f { color-scheme: light; --ds-bg: #eaf1fb; /* светлый прохладный neutral */ --ds-bg-grid: rgba(40,80,150,.045); /* очень прозрачное светлое стекло — опирается на сильный backdrop-blur */ --ds-surface: rgba(255,255,255,.55); --ds-surface-2: rgba(255,255,255,.70); --ds-surface-3: rgba(255,255,255,.85); --ds-border: rgba(255,255,255,.85); --ds-border-strong: rgba(120,155,210,.45); --ds-text: #1b2538; --ds-text-secondary:#45546d; --ds-text-muted: #7c8aa2; --ds-accent: #2f86ff; /* прохладный голубой */ --ds-accent-2: #45c4e6; /* мягкий циан */ --ds-accent-soft: rgba(47,134,255,.12); --ds-on-accent: #ffffff; --ds-success: #18a86a; --ds-warn: #cf9320; --ds-danger: #e5556b; --ds-info: #2f86ff; --ds-chart-1: #2f86ff; --ds-chart-2: #45c4e6; --ds-chart-3: #74acff; --ds-chart-4: #18a86a; --ds-chart-5: #8a7dff; --ds-chart-6: #ef9bb6; --ds-chart-grid: rgba(40,80,150,.10); --ds-chart-track: rgba(40,80,150,.10); --ds-font-display: 'Clash Display', system-ui, sans-serif; --ds-font-body: 'General Sans', system-ui, sans-serif; --ds-font-mono: 'Spline Sans Mono', ui-monospace, monospace; --ds-num-font: var(--ds-font-display); --ds-num-feat: 'tnum' 1; --ds-display-tracking: -0.015em; --ds-display-weight: 600; --ds-radius: 22px; --ds-radius-sm: 14px; --ds-radius-pill: 999px; --ds-border-w: 1px; --ds-shadow-1: 0 1px 0 rgba(255,255,255,.9) inset, 0 10px 30px rgba(70,105,165,.12); --ds-shadow-2: 0 26px 64px rgba(70,105,165,.18); --ds-glow: 0 0 40px rgba(69,196,230,.22); --ds-blur: 26px; /* светлый, светящийся, воздушный фон под стеклом */ --ds-app-bg: radial-gradient(60% 50% at 10% 6%, rgba(120,180,255,.42) 0%, transparent 60%), radial-gradient(55% 45% at 90% 12%, rgba(150,225,255,.42) 0%, transparent 60%), radial-gradient(72% 60% at 50% 110%, rgba(190,212,255,.40) 0%, transparent 55%), linear-gradient(160deg, #f4f8ff 0%, #e6eefa 100%); } /* ========================================================================== * G · AURORA GLASS · WARM GREIGE — тёплый серо-бежевый, уютный премиум, стекло * Настроение: «cozy premium», приглушённый warm greige, песочные/таупе акценты, * без неона, та же стеклянная материальность, но тёплая. * ======================================================================== */ .ds-g { color-scheme: dark; --ds-bg: #2c2823; /* тёплый тёмный greige */ --ds-bg-grid: rgba(255,240,220,.035); /* тёплое тонированное стекло */ --ds-surface: rgba(240,230,216,.08); --ds-surface-2: rgba(240,230,216,.12); --ds-surface-3: rgba(240,230,216,.18); --ds-border: rgba(240,230,216,.16); --ds-border-strong: rgba(240,230,216,.34); --ds-text: #f4ede1; --ds-text-secondary:#d4c8b7; --ds-text-muted: #a99c88; --ds-accent: #d8b489; /* песок / sand */ --ds-accent-2: #c49d76; /* таупе */ --ds-accent-soft: rgba(216,180,137,.16); --ds-on-accent: #2c2823; --ds-success: #a9c79c; --ds-warn: #e0c074; --ds-danger: #e0998a; --ds-info: #bcc3d2; --ds-chart-1: #d8b489; --ds-chart-2: #c49d76; --ds-chart-3: #b3a78d; --ds-chart-4: #a9c79c; --ds-chart-5: #cdb0c0; --ds-chart-6: #e0c074; --ds-chart-grid: rgba(240,230,216,.10); --ds-chart-track: rgba(240,230,216,.12); --ds-font-display: 'Clash Display', system-ui, sans-serif; --ds-font-body: 'General Sans', system-ui, sans-serif; --ds-font-mono: 'Spline Sans Mono', ui-monospace, monospace; --ds-num-font: var(--ds-font-display); --ds-num-feat: 'tnum' 1; --ds-display-tracking: -0.015em; --ds-display-weight: 600; --ds-radius: 20px; --ds-radius-sm: 14px; --ds-radius-pill: 999px; --ds-border-w: 1px; --ds-shadow-1: 0 1px 0 rgba(255,244,228,.16) inset, 0 8px 30px rgba(0,0,0,.34); --ds-shadow-2: 0 24px 66px rgba(0,0,0,.46); --ds-glow: 0 0 38px rgba(216,180,137,.22); --ds-blur: 22px; /* тёплый сумеречный greige-фон под стеклом */ --ds-app-bg: radial-gradient(60% 50% at 12% 8%, rgba(216,180,137,.30) 0%, transparent 60%), radial-gradient(55% 45% at 88% 16%, rgba(182,160,138,.28) 0%, transparent 60%), radial-gradient(72% 60% at 50% 110%, rgba(150,134,114,.30) 0%, transparent 55%), linear-gradient(160deg, #35302a 0%, #25201a 100%); } /* ========================================================================== * H · AURORA GLASS · EMBER HUD — тёмное дымчатое стекло + янтарное свечение * Настроение: «mission control / war-room», тёмная сцена с тёплым свечением * на горизонте, HUD-радары и гейджи, светящиеся линии, плотная bento-сетка. * ======================================================================== */ .ds-h { color-scheme: dark; --ds-bg: #0c0a08; /* тёплый near-black */ --ds-bg-grid: rgba(255,150,70,.05); /* тёмное дымчатое тонированное стекло */ --ds-surface: rgba(28,21,15,.55); --ds-surface-2: rgba(40,29,19,.62); --ds-surface-3: rgba(52,37,23,.70); --ds-border: rgba(255,150,70,.18); --ds-border-strong: rgba(255,150,70,.44); --ds-text: #fbeede; --ds-text-secondary:#d8c3ad; --ds-text-muted: #9a8470; --ds-accent: #ff8a36; /* янтарь / orange */ --ds-accent-2: #ff4d3d; /* ember-red */ --ds-accent-soft: rgba(255,138,54,.16); --ds-on-accent: #160c05; --ds-success: #6fd99a; --ds-warn: #ffb347; --ds-danger: #ff4d3d; --ds-info: #ffb347; --ds-chart-1: #ff8a36; --ds-chart-2: #ff4d3d; --ds-chart-3: #ffb347; --ds-chart-4: #ffd27a; --ds-chart-5: #ff6b9d; --ds-chart-6: #6fd99a; --ds-chart-grid: rgba(255,150,70,.10); --ds-chart-track: rgba(255,255,255,.08); --ds-font-display: 'Space Grotesk', system-ui, sans-serif; --ds-font-body: 'Spline Sans', system-ui, sans-serif; --ds-font-mono: 'JetBrains Mono', ui-monospace, monospace; --ds-num-font: var(--ds-font-mono); --ds-num-feat: 'tnum' 1, 'zero' 1; --ds-display-tracking: -0.01em; --ds-display-weight: 600; --ds-radius: 16px; --ds-radius-sm: 10px; --ds-radius-pill: 999px; --ds-border-w: 1px; --ds-shadow-1: 0 1px 0 rgba(255,180,120,.10) inset, 0 10px 34px rgba(0,0,0,.6); --ds-shadow-2: 0 26px 70px rgba(0,0,0,.7); --ds-glow: 0 0 0 1px rgba(255,138,54,.25), 0 0 30px rgba(255,90,40,.28); --ds-blur: 18px; /* тёмная сцена: тёплое свечение на горизонте снизу + дымка сверху */ --ds-app-bg: radial-gradient(85% 55% at 50% 120%, rgba(255,120,40,.36) 0%, rgba(255,70,40,.13) 34%, transparent 66%), radial-gradient(60% 42% at 82% -4%, rgba(150,72,34,.30) 0%, transparent 56%), linear-gradient(180deg, #0c0a08 0%, #161009 55%, #0a0705 100%); } /* ========================================================================== * I · AURORA GLASS · EMBER HUD · LIVE — близнец H по структуре/компонентам. * Отличия только два: (1) серое дымчатое стекло вместо near-black, акценты — * ПАСТЕЛЬНЫЕ тёплые (мягкий красный / пастельный жёлтый / пастельный оранжевый), * мягче и светлее эмбера H; (2) усиленное «живое» движение — задаётся в skin.css. * Настроение: рафинированный серый mission-control, тёплое, но не неоновое свечение. * Доступность: scrim/затемнение под текстом, читаемый контраст на сером стекле. * ======================================================================== */ .ds-i { color-scheme: dark; --ds-bg: #1b1d21; /* рафинированный нейтральный серый */ --ds-bg-grid: rgba(255,196,150,.045); /* серое дымчатое тонированное стекло */ --ds-surface: rgba(58,62,70,.50); --ds-surface-2: rgba(70,75,84,.58); --ds-surface-3: rgba(84,90,100,.66); --ds-border: rgba(255,200,170,.16); --ds-border-strong: rgba(255,190,150,.40); --ds-text: #f3eee9; --ds-text-secondary:#cdc6c0; --ds-text-muted: #968f89; --ds-accent: #ffb38a; /* пастельный оранжевый */ --ds-accent-2: #ff9a92; /* пастельный/мягкий красный */ --ds-accent-soft: rgba(255,179,138,.16); --ds-on-accent: #2a1810; --ds-success: #9fdfb8; --ds-warn: #ffd98a; /* пастельный жёлтый */ --ds-danger: #ff9a92; --ds-info: #ffd98a; --ds-chart-1: #ffb38a; --ds-chart-2: #ff9a92; --ds-chart-3: #ffd98a; --ds-chart-4: #ffe6b0; --ds-chart-5: #ffb0c4; --ds-chart-6: #9fdfb8; --ds-chart-grid: rgba(255,200,170,.09); --ds-chart-track: rgba(255,255,255,.07); --ds-font-display: 'Space Grotesk', system-ui, sans-serif; --ds-font-body: 'Spline Sans', system-ui, sans-serif; --ds-font-mono: 'JetBrains Mono', ui-monospace, monospace; --ds-num-font: var(--ds-font-mono); --ds-num-feat: 'tnum' 1, 'zero' 1; --ds-display-tracking: -0.01em; --ds-display-weight: 600; --ds-radius: 16px; --ds-radius-sm: 10px; --ds-radius-pill: 999px; --ds-border-w: 1px; --ds-shadow-1: 0 1px 0 rgba(255,210,180,.10) inset, 0 10px 34px rgba(0,0,0,.45); --ds-shadow-2: 0 26px 70px rgba(0,0,0,.55); --ds-glow: 0 0 0 1px rgba(255,179,138,.22), 0 0 30px rgba(255,154,146,.24); --ds-blur: 18px; /* серая среда: мягкое пастельно-тёплое зарево на горизонте + дымка сверху */ --ds-app-bg: radial-gradient(85% 55% at 50% 120%, rgba(255,168,120,.26) 0%, rgba(255,150,140,.10) 36%, transparent 66%), radial-gradient(60% 42% at 82% -4%, rgba(180,150,140,.22) 0%, transparent 56%), linear-gradient(180deg, #202327 0%, #25282d 52%, #1a1c20 100%); }