/* ============================================================ denys.fast — tokens.css — КАНОНИЧЕСКИЙ слой дизайн-токенов. Единый источник правды для всего UI. Логотип (logo.css) — отдельный самодостаточный компонент, его ink/accent намеренно зеркалят --text/--primary. Тема: атрибут data-theme на (light = дефолт, без атрибута). cream | espresso | obsidian. Имена токенов одинаковы во всех темах — компоненты не знают о теме. Подробности: docs/03-color-themes.md (цвета), docs/01 (элементы). ============================================================ */ :root { /* ---------- Типографика ---------- */ --font-brand: 'Saira', system-ui, sans-serif; /* логотип / акцентные заголовки */ --font-sans: 'Geist', system-ui, -apple-system, sans-serif; /* UI / body */ --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace; --font-num: 'Oxanium', 'Saira', system-ui, sans-serif; /* @kind font */ --fw-regular: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ --fw-bold: 700; /* @kind font */ --fw-black: 800; /* @kind font */ /* Type scale (px) */ --fs-display: 56px; --lh-display: 1.05; /* @kind font */ --fs-h1: 40px; --lh-h1: 1.1; /* @kind font */ --fs-h2: 32px; --lh-h2: 1.15; /* @kind font */ --fs-h3: 24px; --lh-h3: 1.25; /* @kind font */ --fs-h4: 20px; --lh-h4: 1.3; /* @kind font */ --fs-h5: 18px; --lh-h5: 1.35; /* @kind font */ --fs-h6: 16px; --lh-h6: 1.4; /* @kind font */ --fs-body-lg: 18px; --lh-body: 1.6; /* @kind font */ --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 13px; --lh-tight: 1.4; /* @kind font */ --fs-overline:12px; --ls-overline:.08em; /* @kind font */ --fs-code: 14px; /* ---------- Spacing (база 4) ---------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ---------- Радиусы ---------- */ --radius-none: 0; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* ---------- Границы ---------- */ --border-1: 1px; /* @kind other */ --border-2: 2px; /* @kind other */ /* ---------- Тени (используют --shadow-color из темы) ---------- */ --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / .08); --shadow-md: 0 4px 10px hsl(var(--shadow-color) / .10); --shadow-lg: 0 10px 24px hsl(var(--shadow-color) / .14); --shadow-xl: 0 20px 48px hsl(var(--shadow-color) / .18); /* ---------- Движение ---------- */ --dur-fast: 100ms; /* @kind other */ --dur-base: 200ms; /* @kind other */ --dur-slow: 300ms; /* @kind other */ --ease-out: cubic-bezier(.2, .8, .3, 1); /* @kind other */ --ease-in-out: cubic-bezier(.4, 0, .2, 1); /* @kind other */ --ease-spring: cubic-bezier(.34, 1.4, .55, 1); /* @kind other */ /* ---------- Z-index ---------- */ --z-base: 0; /* @kind other */ --z-dropdown: 1000; /* @kind other */ --z-sticky: 1100; /* @kind other */ --z-modal: 1300; /* @kind other */ --z-toast: 1400; /* @kind other */ --z-tooltip: 1500; /* @kind other */ /* ---------- Breakpoints (для справки; в @media — литералы) ---------- */ --bp-mobile: 480px; --bp-tablet: 768px; --bp-desktop: 1024px; --bp-wide: 1440px; /* ============ ЦВЕТА · Light (дефолт) ============ */ --bg: #FFFFFF; --surface: #F6F7F9; --surface-elevated: #FFFFFF; --surface-sunken: #EFF1F4; --overlay: rgba(15, 18, 25, 0.45); --border: #E3E6EB; --border-strong: #D2D7DE; --divider: #EEF0F3; --text: #14171F; --text-secondary: #515A67; --text-muted: #8A93A1; --text-disabled: #B6BDC7; --text-inverse: #FFFFFF; --text-link: #4F46E5; --primary: #5048E5; --primary-hover: #4038C8; --primary-active: #352DA8; --primary-soft: #ECEBFD; --on-primary: #FFFFFF; --secondary: #0EA5E9; --accent: #06B6D4; --success: #16A34A; --success-soft: #E7F6EC; --warning: #D97706; --warning-soft: #FCF1E2; --error: #DC2626; --error-soft: #FCEBEB; --info: #2563EB; --info-soft: #E8F0FE; --focus-ring: rgba(80, 72, 229, 0.40); --shadow-color: 220 25% 20%; --selection-bg: #D7D4FB; --gradient-brand: linear-gradient(135deg, #5048E5, #06B6D4); /* @kind other */ } /* ============ ЦВЕТА · Cream ============ */ [data-theme="cream"] { --bg: #F4EDE0; --surface: #FBF6EC; --surface-elevated: #FFFDF8; --surface-sunken: #EBE2D1; --overlay: rgba(43, 38, 32, 0.40); --border: #E2D6C2; --border-strong: #D2C3A9; --divider: #EADFCC; --text: #2B2620; --text-secondary: #6B6253; --text-muted: #9A8F7C; --text-disabled: #BDB3A0; --text-inverse: #FBF6EC; --text-link: #BC5B2E; --primary: #BC5B2E; --primary-hover: #A54D24; --primary-active: #8C401D; --primary-soft: #F4E2D4; --on-primary: #FFFDF8; --secondary: #2F6B4F; --accent: #C2941B; --success: #4D7C0F; --success-soft: #ECF1DF; --warning: #B45309; --warning-soft: #F7E9D7; --error: #B4231D; --error-soft: #F6E0DD; --info: #2C5E8A; --info-soft: #E1EBF2; --focus-ring: rgba(188, 91, 46, 0.40); --shadow-color: 30 30% 25%; --selection-bg: #EAD3BE; --gradient-brand: linear-gradient(135deg, #BC5B2E, #C2941B); /* @kind other */ } /* ============ ЦВЕТА · Espresso ============ */ [data-theme="espresso"] { --bg: #1A1410; --surface: #241C16; --surface-elevated: #2E251D; --surface-sunken: #130E0A; --overlay: rgba(10, 6, 3, 0.60); --border: #3B2F25; --border-strong: #4D3E30; --divider: #2E251D; --text: #F0E8DD; --text-secondary: #B8A693; --text-muted: #8A7A65; --text-disabled: #5E5142; --text-inverse: #1A1410; --text-link: #E0853D; --primary: #E0853D; --primary-hover: #EC9450; --primary-active: #C97231; --primary-soft: #2E2018; --on-primary: #1A1410; --secondary: #C2941B; --accent: #93B84F; --success: #93B84F; --success-soft: #1F2912; --warning: #E0A53D; --warning-soft: #2E2410; --error: #E57363; --error-soft: #2E1813; --info: #6BA6C9; --info-soft: #14222B; --focus-ring: rgba(224, 133, 61, 0.45); --shadow-color: 25 40% 3%; --selection-bg: #4A3220; --gradient-brand: linear-gradient(135deg, #E0853D, #C2941B); /* @kind other */ } /* ============ ЦВЕТА · Obsidian ============ */ [data-theme="obsidian"] { --bg: #000000; --surface: #0D0D0F; --surface-elevated: #161618; --surface-sunken: #000000; --overlay: rgba(0, 0, 0, 0.70); --border: #26262A; --border-strong: #38383D; --divider: #1C1C1F; --text: #F4F4F5; --text-secondary: #A1A1AA; --text-muted: #71717A; --text-disabled: #4B4B52; --text-inverse: #000000; --text-link: #2DD4BF; --primary: #2DD4BF; --primary-hover: #4EE0CE; --primary-active: #20B6A3; --primary-soft: #0A1E1B; --on-primary: #000000; --secondary: #A78BFA; --accent: #FACC15; --success: #34D399; --success-soft: #07241D; --warning: #FACC15; --warning-soft: #241E07; --error: #FB7185; --error-soft: #2A1015; --info: #818CF8; --info-soft: #16162B; --focus-ring: rgba(45, 212, 191, 0.50); --shadow-color: 0 0% 0%; --selection-bg: #14403A; --gradient-brand: linear-gradient(135deg, #2DD4BF, #A78BFA); /* @kind other */ } /* Логотип (logo.css) самодостаточен: его --df-ink/--df-accent по каждой теме намеренно равны --text/--primary (проверяется в src/build.py). Поэтому при правке палитры обновляй и THEMES в build.py, и значения здесь. */ ::selection { background: var(--selection-bg); }