/* ========================================================================== trend/core — Design Tokens Единственный источник правды для цветов, шрифтов, отступов, радиусов. Поддерживает обе темы — light (default) и dark — через атрибут `data-theme` на корневом ``. Структура: 1. THEME · LIGHT — shadcn HSL триплеты + semantic layer 2. THEME · DARK — переопределения для тёмной темы 3. LEGACY tokens — для слайдов и старого кода (не редактировать) 4. TYPOGRAPHY — families · sizes · weights · leading · tracking 5. SPACING · RADIUS · LAYOUT — system-level геометрия 6. CHART sizing — высоты графиков (theme-agnostic) 7. BASE — reset + theme-aware body 8. LOGO lockup v3 — `trendcore/` + размерные классы 9. TYPOGRAPHY helpers — .t-display / .t-h1 / .t-body / etc. ========================================================================== */ /* ========================================================================== 1. THEME · LIGHT (default) shadcn-style HSL триплеты — `--background: 45 14% 100%` хранится как набор значений без `hsl()`, чтобы можно было собирать `hsl(var(--background) / .8)`. Поверх primitives — Trendcore semantic layer (paper / ink / line / accent). ========================================================================== */ :root, :root[data-theme="light"] { /* shadcn HSL primitives ------------------------------------------------- */ --background: 0 0% 100%; --foreground: 0 0% 4%; --card: 0 0% 100%; --popover: 0 0% 100%; --primary: 0 0% 4%; --primary-foreground: 0 0% 100%; --secondary: 40 14% 93%; --muted: 40 14% 93%; --muted-foreground: 0 0% 42%; --accent: 15 100% 59%; --accent-foreground: 0 0% 4%; --destructive: 0 72% 45%; --success: 142 71% 36%; --warning: 38 92% 50%; --info: 217 91% 60%; --border: 45 15% 87%; --input: 45 15% 87%; --ring: 15 100% 59%; --radius: 9999px; --image-skeleton: #EDEBE5; --fg-muted: #9A9A96; --code-bg: #F8F7F3; --code-fg: #0B0B0B; /* Form field focus pattern --------------------------------------------- */ /* `--field-color` — обычный border у input, `--field-focus` — outline ring в состоянии focus-visible. На focus border исчезает (transparent), ring появляется. */ --field-color: hsl(var(--input)); --field-focus: hsl(var(--muted-foreground)); /* Trendcore semantic layer (paper / ink / ornament / line / accent) ---- */ /* Алиасы поверх shadcn primitives. Нейминг по use-case: имя сразу говорит, где элемент находится (на бумаге / чернила / линия / акцент) и насколько интенсивно (mild → faint). Новый код пишем на этих токенах. */ --paper: hsl(var(--background)); /* primary surface */ --paper-warm: #F6F5F2; /* alt warm surface (тёплый бежевый) */ --paper-soft: hsl(var(--muted)); /* subdued surface (wells, hover) */ --ink: hsl(var(--foreground)); /* full-strength text #0B0B0B */ --ink-mild: hsl(var(--muted-foreground)); /* secondary text — WCAG AA на paper */ --ink-faint: #9A9A96; /* de-emphasized — fail AA, sparingly */ --ornament: #9A9A96; /* slash, watermarks (НЕ для текста) */ --line: hsl(var(--border)); /* 1px borders, separators */ --accent-color: hsl(var(--accent)); /* primary accent #FF5B2E */ --accent-on: #0B0B0B; /* что ставим на accent-фон */ } /* ========================================================================== 2. THEME · DARK Только переопределения primitives — semantic layer пересчитается автоматически (так как держится на `hsl(var(--background))` и т.д.). ========================================================================== */ :root[data-theme="dark"] { /* v4 · STEEL cold — brushed-steel palette (hue 208°, sat 24-30%). Hue смещён ближе к blue (208°), сатурация поднята до 24-30% — это даёт характерный «холодная сталь» оттенок: чувствуется металличность, но не уход в navy/teal. Foreground silvery-white с лёгким blue cast. Все lightness tiers сохранены для contrast/readability. */ --background: 208 28% 10%; /* steel-deep, gunmetal feel */ --foreground: 205 22% 97%; /* silvery white с cool cast */ --card: 208 26% 16%; /* brushed steel card */ --popover: 208 26% 20%; --primary: 205 22% 97%; --primary-foreground: 208 28% 10%; --secondary: 208 24% 23%; --muted: 208 24% 23%; --muted-foreground: 210 22% 78%; /* steel-bright secondary text */ --accent: 15 100% 62%; /* orange accent — heavy contrast против steel */ --accent-foreground: 208 28% 10%; --destructive: 0 72% 62%; --success: 168 55% 56%; /* teal success — fits cool steel */ --warning: 38 92% 65%; --info: 200 95% 68%; /* steel-blue info */ --border: 208 26% 34%; /* visible brushed-steel borders */ --input: 208 26% 34%; --ring: 15 100% 62%; --image-skeleton: #1B2734; /* gunmetal skeleton */ --code-bg: #131D27; --code-fg: #E3EAF2; color-scheme: dark; /* Trendcore overrides — steel cold */ --paper-warm: #131F2A; /* "warm" surface → deep steel base */ --accent-on: #0B0B0B; --ink-faint: #9CA7B5; /* faint text с steel-blue оттенком */ --ornament: #9CA7B5; } /* ========================================================================== 3. LEGACY tokens Используются на слайдах (decks/) и в старом коде. Не редактировать. Новый код пишем на theme-aware --paper / --ink / --line / --accent-color. ========================================================================== */ :root { /* Color: surface */ --color-cream: #F6F5F2; /* основной фон страницы/слайда */ --color-white: #FFFFFF; /* альтернативный светлый фон */ --color-ink: #0B0B0B; /* основной текст + тёмный фон */ --color-stone: #2A2A28; /* альтернативный тёмный фон */ /* Color: text */ --color-text: #0B0B0B; --color-text-muted: #6B6B6B; --color-text-faint: #9C9A93; --color-text-inverse: #FFFFFF; --color-text-on-dark: #BBBBBB; --color-text-on-dark-muted: #888888; /* Color: accent */ --color-accent: #FF5B2E; --color-accent-ink: #0B0B0B; /* Color: structural */ --color-line: #E4E2DC; --color-line-dark: #2A2A28; } /* ========================================================================== 4. TYPOGRAPHY · families · sizes · weights · leading · tracking ========================================================================== */ :root { /* Family */ --font-serif: "STIX Two Text", Georgia, "Times New Roman", serif; --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --font-script: "Caveat", cursive; --fw-mono: 500; /* JetBrains Mono смотрится плотнее на 500 */ /* Size (desktop / slide-scale) */ --fs-display: 180px; --fs-h1: 88px; --fs-h2: 56px; --fs-h3: 32px; --fs-h4: 22px; --fs-body-lg: 20px; --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 14px; --fs-micro: 10px; /* Weight */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Leading */ --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-prose: 1.6; /* Tracking */ --tr-tight: -0.03em; --tr-snug: -0.02em; --tr-normal: 0; --tr-wide: 0.06em; --tr-wider: 0.12em; } /* ========================================================================== 5. SPACING · RADIUS · BORDERS · LAYOUT ========================================================================== */ :root { /* Spacing scale (4-based) */ --s-0: 0; --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; /* Radius — отдельная семантическая шкала вне shadcn-овского --radius (pill) */ --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-pill: 999px; /* Borders */ --border-hairline: 1px solid var(--color-line); --border-ink: 1px solid var(--color-ink); /* Layout */ --container: 1440px; --slide-w: 1920px; --slide-h: 1080px; --slide-pad: 96px; } /* ========================================================================== 6. CHART sizing (theme-agnostic) Используется в app-components.html для bar / line / area-чартов. Должны жить вне theme-блоков, иначе при отсутствии в одной из тем var() резолвится в пустое значение → высоты коллапсируют. ========================================================================== */ :root { --chart-h: 240px; /* default chart height */ --chart-h-sm: 180px; /* compact */ --chart-h-lg: 360px; /* hero / dashboard primary */ --chart-x-label-h: 20px; /* X-axis labels row */ } /* ========================================================================== 7. BASE · reset · theme-aware body ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html, body { background: hsl(var(--background)); color: hsl(var(--foreground)); transition: background .35s ease, color .35s ease; } body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } *:focus { outline: none; } *:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; border-radius: calc(var(--radius) - 2px); } img { max-width: 100%; display: block; } /* ========================================================================== 8. LOGO — locked lockup v3 `trendcore/` — wordmark в STIX serif Medium 500. trend + core = ink (theme-aware), разделитель / = ornament gray, child = accent. ========================================================================== */ .tc-logo { display: inline-flex; align-items: baseline; line-height: 1; color: hsl(var(--foreground)); white-space: nowrap; letter-spacing: -0.05em; text-decoration: none; } .tc-logo__trend, .tc-logo__core { font-family: var(--font-serif); font-weight: var(--fw-medium); font-size: 1em; letter-spacing: -0.05em; } .tc-logo__sep { font-family: var(--font-serif); font-weight: var(--fw-medium); font-size: 0.65em; color: var(--fg-muted); margin: 0 0.12em; } .tc-logo__child { font-family: var(--font-serif); font-weight: var(--fw-medium); font-size: 0.65em; color: hsl(var(--accent)); letter-spacing: -0.05em; } /* On-dark inverse — для лого в Light-панели на тёмной странице, и наоборот */ .tc-logo--on-dark, .tc-logo--on-dark .tc-logo__trend, .tc-logo--on-dark .tc-logo__core { color: #FFFFFF; } .tc-logo--on-dark .tc-logo__child { color: #FF5B2E; } /* Sizes — крупные используют clamp() для responsive-поведения на ≤880px */ .tc-logo--14 { font-size: 14px; } .tc-logo--20 { font-size: 20px; } .tc-logo--22 { font-size: 22px; } .tc-logo--26 { font-size: 26px; } .tc-logo--28 { font-size: 28px; } .tc-logo--32 { font-size: 32px; } .tc-logo--42 { font-size: clamp(24px, 5vw, 42px); } .tc-logo--56 { font-size: clamp(28px, 6.5vw, 56px); } .tc-logo--64 { font-size: clamp(28px, 7vw, 64px); } .tc-logo--88 { font-size: clamp(40px, 10vw, 88px); } .tc-logo--112 { font-size: clamp(36px, 12vw, 112px); } /* Usage: */ /* ========================================================================== 9. TYPOGRAPHY HELPERS ========================================================================== */ .t-display { font-family: var(--font-serif); font-weight: var(--fw-medium); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tr-snug); } .t-h1 { font-family: var(--font-serif); font-weight: var(--fw-medium); font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tr-snug); } .t-h2 { font-family: var(--font-serif); font-weight: var(--fw-medium); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); } .t-h3 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); } .t-h4 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-h4); line-height: var(--lh-snug); } .t-body-lg { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body-lg); line-height: var(--lh-prose); } .t-body { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-normal); } .t-body-sm { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body-sm); line-height: var(--lh-normal); } .t-caption { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-caption); line-height: 1.4; color: var(--ink-mild); } .t-label { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--fs-caption); line-height: 1.4; color: var(--ink-mild); } .t-micro { font-family: var(--font-mono); font-weight: var(--fw-regular); font-size: var(--fs-micro); letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--ink-mild); } .t-script { font-family: var(--font-script); font-weight: 700; font-style: italic; color: var(--accent-color); } .t-italic { font-style: italic; } .t-muted { color: var(--ink-mild); } .t-faint { color: var(--ink-faint); } .t-accent { color: var(--accent-color); }