/* ================================================================= * barterly — Design Tokens (single source of truth) * ================================================================= * * Все CSS-переменные --bl-* живут здесь и НИГДЕ БОЛЬШЕ. Этот файл * подключается ПЕРВЫМ из всех stylesheets (см. в index.html * и в _worker.js Layout/_w2_layout/_w54_noindexLayout). * * Таксономия префикса --bl- (от "Barterly Layer"): * * color/brand --bl-lime, --bl-violet, --bl-pink, --bl-cyan, ... * color/neutral --bl-ink-0..900 (10 ступеней grayscale) * color/semantic --bl-bg, --bl-surface, --bl-text, --bl-accent, ... * color/state --bl-border, --bl-border-strong * typography --bl-font-display, --bl-font-body, --bl-font-mono * type-scale --bl-fs-xs..hero (fluid clamp() на крупных размерах) * layout --bl-container, --bl-gutter, --bl-section-gap * radius --bl-r-sm..2xl, --bl-r (default), --bl-r-full * motion --bl-ease, --bl-ease-spring, --bl-d-fast..slow * shadow --bl-card-shadow, --bl-card-shadow-hover * gradient --bl-hero-grad * * Темизация: все переменные имеют 2 определения — в `:root` (light) * и в `.theme-dark`. Переключение темы ставит/снимает класс * `.theme-dark` на . * * При добавлении нового токена: * 1) положить определение СЮДА (и в light, и в dark если зависит от темы) * 2) использовать `var(--bl-name)` в любом другом CSS-файле * 3) не дублировать определение в styles.css / polish.css / components.css * * ================================================================= */ @layer tokens { :root { /* ---------- color/brand ---------- */ --bl-lime: #C8FF00; --bl-lime-dim: #A3D600; --bl-violet: #7C3AED; --bl-violet-light: #A78BFA; --bl-pink: #F472B6; --bl-cyan: #22D3EE; --bl-amber: #FBBF24; --bl-emerald: #34D399; --bl-red: #EF4444; /* ---------- color/neutral (grayscale) ---------- */ --bl-ink-0: #FFFFFF; --bl-ink-50: #FAFAF6; --bl-ink-100: #F0F0EA; --bl-ink-200: #E5E5DF; --bl-ink-700: #52525B; --bl-ink-800: #27272A; --bl-ink-900: #0A0A0C; /* ---------- color/semantic — light theme defaults ---------- */ --bl-bg: var(--bl-ink-50); --bl-bg-soft: var(--bl-ink-100); --bl-surface: var(--bl-ink-0); --bl-surface-glass: color-mix(in srgb, var(--bl-ink-0) 72%, transparent); --bl-text: var(--bl-ink-900); --bl-text-soft: var(--bl-ink-700); --bl-text-muted: #A1A1AA; --bl-border: color-mix(in srgb, var(--bl-ink-900) 8%, transparent); --bl-border-strong: color-mix(in srgb, var(--bl-ink-900) 16%, transparent); --bl-accent: var(--bl-violet); --bl-accent-text: #FFFFFF; --bl-card-bg: var(--bl-ink-0); /* ---------- shadow ---------- */ --bl-card-shadow: 0 1px 2px rgba(10,10,12,0.04), 0 8px 24px rgba(10,10,12,0.06); --bl-card-shadow-hover: 0 4px 12px rgba(10,10,12,0.08), 0 18px 48px rgba(10,10,12,0.10); /* ---------- gradient ---------- */ --bl-hero-grad: radial-gradient(ellipse at 80% 0%, color-mix(in srgb, var(--bl-violet) 12%, transparent) 0%, transparent 55%), radial-gradient(ellipse at 0% 100%, color-mix(in srgb, var(--bl-lime) 10%, transparent) 0%, transparent 55%), linear-gradient(180deg, var(--bl-ink-50) 0%, var(--bl-ink-100) 100%); /* ---------- typography ---------- */ --bl-font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif; --bl-font-body: 'Inter', 'Inter Tight', system-ui, -apple-system, sans-serif; --bl-font-serif: 'Inter', 'Times New Roman', serif; --bl-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; /* ---------- type-scale (fluid via clamp on larger sizes) ---------- */ --bl-fs-xs: 0.75rem; --bl-fs-sm: 0.875rem; --bl-fs-base: 1rem; --bl-fs-lg: 1.125rem; --bl-fs-xl: 1.25rem; --bl-fs-2xl: 1.5rem; --bl-fs-3xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem); --bl-fs-4xl: clamp(2rem, 1.5rem + 2.4vw, 3rem); --bl-fs-5xl: clamp(2.5rem, 1.6rem + 4vw, 4rem); --bl-fs-hero: clamp(2.6rem, 1.6rem + 5vw, 5.5rem); /* ---------- layout ---------- */ --bl-container: 1200px; --bl-container-wide: 1400px; --bl-gutter: clamp(16px, 4vw, 32px); --bl-section-gap: clamp(72px, 9vw, 132px); /* ---------- radius ---------- */ --bl-r-sm: 8px; --bl-r: 12px; --bl-r-lg: 16px; --bl-r-xl: 24px; --bl-r-2xl: 32px; --bl-r-full: 9999px; /* ---------- motion ---------- */ --bl-ease: cubic-bezier(0.16, 1, 0.3, 1); --bl-ease-in: cubic-bezier(0.7, 0, 0.84, 0); --bl-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --bl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --bl-d-fast: 0.15s; --bl-d: 0.3s; --bl-d-slow: 0.6s; color-scheme: light; } /* ---------- dark theme overrides ---------- */ .theme-dark { --bl-bg: var(--bl-ink-900); --bl-bg-soft: #111114; --bl-surface: #1A1A1F; --bl-surface-glass: color-mix(in srgb, #0A0A0C 82%, transparent); --bl-text: var(--bl-ink-50); --bl-text-soft: #A1A1AA; --bl-text-muted: #71717A; --bl-border: color-mix(in srgb, var(--bl-ink-50) 8%, transparent); --bl-border-strong: color-mix(in srgb, var(--bl-ink-50) 16%, transparent); --bl-accent: var(--bl-lime); --bl-accent-text: var(--bl-ink-900); --bl-card-bg: #131318; --bl-card-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.3); --bl-card-shadow-hover: 0 4px 12px rgba(0,0,0,0.3), 0 18px 48px rgba(0,0,0,0.4); --bl-hero-grad: radial-gradient(ellipse at 80% 0%, color-mix(in srgb, var(--bl-lime) 7%, transparent) 0%, transparent 55%), radial-gradient(ellipse at 0% 100%, color-mix(in srgb, var(--bl-violet) 10%, transparent) 0%, transparent 55%), linear-gradient(180deg, var(--bl-ink-900) 0%, #0F0F14 100%); color-scheme: dark; } /* Auto-dark when user prefers dark and hasn't explicitly chosen light */ @media (prefers-color-scheme: dark) { :root:not(.theme-light) { color-scheme: dark; } } }