/* Design tokens — Sendsay EmailToolbox «Блюпринт» * Source of truth: design_handoff_emailtoolbox/README.md §Design Tokens * Do not add new colors here — the palette is deliberately narrow. */ :root { /* --- Neutrals: light theme --- */ --bg: #FFFFFF; --fg: #14161C; --fg-secondary: #4A4F59; --fg-tertiary: #5A5F69; --fg-muted: #8A8F99; --fg-disabled: #B4B8C0; --rule-strong: #14161C; --rule: #E2E4E9; --track: #F0F1F4; --skeleton: #F4F5F7; --accent: oklch(0.52 0.19 274); --accent-hover: oklch(0.46 0.19 274); --accent-bg: oklch(0.97 0.02 274); --on-accent: #FFFFFF; /* --- Statuses (dot / bar / label text) --- */ --status-pass: oklch(0.62 0.15 155); --status-error: oklch(0.6 0.19 25); --status-warn: oklch(0.7 0.15 72); --status-notset: #B8B2A5; --status-pass-text: oklch(0.48 0.11 155); --status-error-text: oklch(0.5 0.15 25); --status-warn-text: oklch(0.52 0.13 72); --status-notset-text: #8A8F99; /* Big score numbers — need higher contrast so they don't wash out on white */ --status-pass-big: oklch(0.55 0.14 155); --status-error-big: oklch(0.55 0.17 25); --status-warn-big: oklch(0.58 0.14 72); /* --- DNS syntax highlight --- */ --dns-type: oklch(0.52 0.19 274); --dns-version: oklch(0.45 0.15 300); --dns-key: oklch(0.48 0.11 155); --dns-num: oklch(0.55 0.13 72); --dns-value: #14161C; --dns-error: oklch(0.5 0.15 25); /* --- Typography --- */ --font-sans: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-hero: 54px; --lh-hero: 1.04; --tr-hero: -0.04em; --fs-verdict: 42px; --lh-verdict: 1.1; --tr-verdict: -0.035em; --fs-h2: 34px; --lh-h2: 1.15; --tr-h2: -0.03em; --fs-tool: 20px; /* заголовок инструмента/проверки */ --tr-tool: -0.02em; --fs-body: 16px; --fs-body-sm: 15px; --fs-body-xs: 14.5px; --lh-body: 1.6; --fs-brand: 16px; --tr-brand: -0.01em; --fs-mono-nav: 12.5px; --fs-mono-data: 12.5px; --lh-mono-data: 1.5; --fs-mono-label: 11px; --tr-mono-label: 0.1em; --tr-mono-section: 0.14em; --fs-mono-status: 11.5px; --fs-score: 68px; --tr-score: -0.05em; /* --- Spacing (base 4px) --- */ --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-10: 10px; --space-12: 12px; --space-14: 14px; --space-16: 16px; --space-20: 20px; --space-22: 22px; --space-24: 24px; --space-26: 26px; --space-28: 28px; --space-34: 34px; --space-40: 40px; --space-44: 44px; --space-48: 48px; --space-64: 64px; --space-72: 72px; --header-h: 68px; --page-x: 48px; --content-max: 1280px; --radius-cta: 6px; } /* --- Dark theme override (data-theme="dark" on ) --- */ [data-theme="dark"] { --bg: #0F1115; --fg: #E6E8EC; --fg-secondary: #969CA7; --fg-tertiary: #969CA7; --fg-muted: #757C88; --fg-disabled: #5B616B; --rule-strong: #E6E8EC; --rule: #22262E; --track: #22262E; --skeleton: #191C22; --accent: oklch(0.7 0.16 274); --accent-hover: oklch(0.76 0.16 274); --accent-bg: oklch(0.24 0.05 274); --on-accent: #0F1115; --status-pass-text: oklch(0.78 0.14 155); --status-error-text: oklch(0.78 0.16 25); --status-warn-text: oklch(0.78 0.14 72); --status-notset-text: #757C88; --dns-type: oklch(0.72 0.14 205); --dns-version: oklch(0.75 0.14 300); --dns-key: oklch(0.78 0.14 155); --dns-num: oklch(0.78 0.14 72); --dns-value: #E6E8EC; --dns-error: oklch(0.78 0.16 25); } /* --- Mobile scale (< 768px) --- */ @media (max-width: 767px) { :root { --fs-hero: 34px; --lh-hero: 1.06; --tr-hero: -0.035em; --fs-verdict: 30px; --lh-verdict: 1.12; --tr-verdict: -0.03em; --fs-tool: 17px; --tr-tool: -0.015em; --fs-body: 15px; --fs-body-sm: 14.5px; --lh-body: 1.55; --fs-mono-data: 12px; --fs-score: 44px; --tr-score: -0.045em; --header-h: 58px; --page-x: 20px; } } /* --- Reduced motion --- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }