/* ═══════════════════════════════════ TOKENS — Codex Studio Источник: build_rules.md v1.2 ═══════════════════════════════════ */ :root, [data-theme="dark"] { /* Surface */ --color-bg: #212121; --color-surface: #2a2a2a; --color-surface-2: #313131; --color-surface-offset: #3a3a3a; --color-divider: #404040; --color-border: #4a4a4a; /* Text */ --color-text: #f0eeeb; --color-text-muted: #a8a6a2; --color-text-faint: #8a8884; --color-text-inverse: #212121; /* Primary (accent) */ --color-primary: #327AAE; --color-primary-hover: #2a6695; --color-primary-active: #225380; --color-primary-highlight: rgba(50, 122, 174, 0.12); /* Accent for TEXT use (WCAG AA 4.5:1 on bg/surface). UI-only accents continue to use --color-primary. */ --color-accent-text: #4a94cf; /* v0.13.8.1 — overlay-фон для 3D-контролей над canvas (тёмный в dark) */ --color-ctrl-bg: rgba(22, 22, 22, 0.82); /* v0.13.8.3 — компонент-токены (раньше были как light overrides в main.css — собраны тут). В dark — алиасы на базовые surface-токены, в light — собственные значения. */ --color-work-card-bg: var(--color-surface); /* #2a2a2a */ --color-work-card-bg-hover: var(--color-surface-2); /* #313131 */ --color-work-card-border: var(--color-divider); /* #404040 */ --color-work-card-border-hov: var(--color-border); /* #4a4a4a */ --color-3d-canvas-bg: var(--color-bg); /* #212121 */ --color-3d-canvas-glow: rgba(50, 122, 174, 0.06); /* градиент над canvas */ --color-case-bar-bg: var(--color-bg); /* #212121 — case-mobile-bar */ /* v0.13.8.3 GOLDEN — Blueprint grid tokens (раньше был хардкод в main.css). В dark слабая primary-сетка 0.08/0.18 читается на тёмном фоне, в light эти же альфы дают почти-невидимые линии — усилили в light. */ --bp-grid-minor: rgba(50, 122, 174, 0.08); --bp-grid-major: rgba(50, 122, 174, 0.18); /* v0.7.11 [P2 #11/#12] — Theme-independent overlay tokens. Оба паттерна намеренно одинаковы в dark и light (не переопределяются ниже): • card badge сидит на захардкоженном dark gradient в .work-card__thumb • fullscreen close-btn остаётся dim-dark поверх любого фона страницы. */ --color-card-badge-bg: rgba(20, 20, 20, 0.72); --color-fs-close-bg: rgba(22, 22, 22, 0.82); --color-fs-close-border: rgba(255, 255, 255, 0.18); --color-fs-close-border-hover: rgba(255, 255, 255, 0.4); --color-fs-close-text: rgba(255, 255, 255, 0.72); --color-fs-close-text-hover: #fff; /* Secondary */ --color-secondary: #2E8B8F; --color-secondary-hover: #267679; /* Status */ --color-error: #e05a5a; --color-success: #5a9e6e; /* Typography */ --font-display: 'Clash Display', 'Inter', sans-serif; --font-body: 'General Sans', 'Inter', sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, monospace; --text-xs: clamp(0.65rem, 0.6rem + 0.2vw, 0.75rem); --text-sm: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --text-base: clamp(0.875rem, 0.82rem + 0.28vw, 1rem); --text-lg: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); --text-xl: clamp(1.125rem, 1rem + 0.75vw, 1.5rem); --text-2xl: clamp(1.25rem, 1rem + 1.5vw, 2rem); --text-hero: clamp(3rem, 0.5rem + 7vw, 8rem); /* Spacing (4px grid) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; --space-32: 8rem; /* Radius */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px; --radius-tag: 0.125rem; --radius-card: 0.375rem; /* Shadows */ --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4); --shadow-md: 0 4px 12px oklch(0 0 0 / 0.5); --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.65); /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-inout: cubic-bezier(0.87, 0, 0.13, 1); /* Layout */ --content-max: 1200px; --content-wide: 1440px; --content-text: 720px; } /* Sidebar width — в отдельном блоке :root, чтобы inline-override из JS (document.documentElement.style) имел приоритет над темой. */ :root { --sidebar-w: 340px; } /* Light mode (v0.13.8 — усилены divider/border/surface-offset для видимости; текстовые токены не трогаем) */ [data-theme="light"] { --color-bg: #f5f5f5; --color-surface: #ffffff; --color-surface-2: #ebebeb; /* было #f0f0f0 — 1.05:1 vs bg, карточка сливалась → 1.09:1 (декоративный стек, не UI-line) */ --color-surface-offset: #d4d4d4; /* было #e8e8e8 — 1.12:1, теперь 1.31:1 (фон для offset-панелей) */ /* v0.14.0 [12] — light outliner border затемнён: #8a8a8a (3.17:1) → #7f7e7e (~3.49:1 vs #f5f5f5 bg). Всё ещё >3:1 по WCAG 1.4.11 non-text, но визуально чётче читается на беловатом фоне. */ --color-divider: #7f7e7e; --color-border: #7f7e7e; --color-text: #1a1a1a; --color-text-muted: #555555; --color-text-faint: #626262; /* было #6b6b6b — 4.47:1 на surface-2, теперь 5.12:1 (AA text ≥4.5:1) */ --color-text-inverse: #ffffff; --color-primary-highlight: rgba(50, 122, 174, 0.1); --color-accent-text: #2a6695; /* v0.13.8.1 — overlay-фон для 3D-контролей над canvas (светлый в light, 0.88 для читаемости) */ --color-ctrl-bg: rgba(255, 255, 255, 0.88); /* v0.13.8.3 — компонент-токены light (переехали из main.css): P3 (v0.13.8.2) — work-card серее (было #ffffff — слишком белое); P4 (v0.13.8.2) — 3D canvas серее (было #f5f5f5 — засветка); P5 (v0.13.8.3) — case-mobile-bar серее (было #f5f5f5 — выглядел белым на фоне grain/vignette). */ --color-work-card-bg: #ebebeb; --color-work-card-bg-hover: #e0e0e0; --color-work-card-border: #c8c8c8; --color-work-card-border-hov: #b0b0b0; /* v0.14.0 — canvas серее (было #e6e6e6, виделось как #E3E4E5 из-за glow поверх; mobile и desktop унифицированы). Приближен к фону страницы #f5f5f5, но всё ещё читаемо серый — 1.41:1 luminance ratio к фону. */ --color-3d-canvas-bg: #c9c9c9; --color-3d-canvas-glow: rgba(50, 122, 174, 0.05); /* ослабленный градиент для light */ /* v0.14.1 [5] — case-mobile-bar получает отдельный оттенок #EFEFEF (был =color-bg=#f5f5f5). Пользователь просил корректный фон для мобильной шапки в case-view. */ --color-case-bar-bg: #dedede00; /* v0.15.1 [1.1] — прозрачный фон case-mobile-bar в light (alpha=0), виден body сквозь */ /* v0.13.8.3 GOLDEN — Blueprint grid в light: альфа усилена (0.18/0.36) для видимости на #f5f5f5. Классический blueprint — синяя сетка на светлой бумаге. */ --bp-grid-minor: rgba(50, 122, 174, 0.18); --bp-grid-major: rgba(50, 122, 174, 0.36); }