/* ═══════════════════════════════════════════════════════════ BatchDescribe Design System — Colors & Typography Tokens Version: 2026-04 (V2+ unified) ═══════════════════════════════════════════════════════════ */ /* ── Google Fonts (CDN fallbacks) ─────────────────────────── Kyiv Type Sans must be self-hosted from Projector Foundation. Download: https://projector.com.ua/kyiv-type Place files in fonts/ and use @font-face blocks below. Inter + JetBrains Mono are loaded via in — no @import here. */ /* ── Kyiv Type Sans @font-face (self-hosted — Projector Foundation) ── */ @font-face { font-family: 'Kyiv Type Sans'; src: url('/static/fonts/KyivTypeThin.woff2') format('woff2'), url('/static/fonts/KyivTypeThin.woff') format('woff'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: 'Kyiv Type Sans'; src: url('/static/fonts/KyivTypeLight.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Kyiv Type Sans'; src: url('/static/fonts/KyivTypeRegular.woff2') format('woff2'), url('/static/fonts/KyivTypeRegular.woff') format('woff'), url('/static/fonts/KyivTypeRegular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Kyiv Type Sans'; src: url('/static/fonts/KyivTypeMedium.woff2') format('woff2'), url('/static/fonts/KyivTypeMedium.woff') format('woff'), url('/static/fonts/KyivTypeMedium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Kyiv Type Sans'; src: url('/static/fonts/KyivTypeBold.woff2') format('woff2'), url('/static/fonts/KyivTypeBold.woff') format('woff'), url('/static/fonts/KyivTypeBold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Kyiv Type Sans'; src: url('/static/fonts/KyivTypeHeavy.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Kyiv Type Sans'; src: url('/static/fonts/KyivTypeBlack.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } :root { /* ══════════════════════════════════════════════════════════ BRAND COLORS ══════════════════════════════════════════════════════════ */ /* Primary — Signal Orange ★ SINGLE SOURCE OF TRUTH */ --color-primary: #E84E10; /* signal orange — primary action, CTA, buttons, focus */ --color-primary-dark: #C63D08; /* hover / pressed state */ --color-primary-deeper:#A33006; /* active / deeply pressed */ --color-primary-mid: #FFB08A; /* mid tint — decorative only */ --color-primary-soft: #FFEEE5; /* selected cell, accent wash */ /* Legacy alias — keep for backward compat, same value */ --color-accent: #E84E10; /* = --color-primary */ --color-accent-dark: #C63D08; /* = --color-primary-dark */ --color-accent-hover: #C63D08; --color-accent-soft: #FFEEE5; /* ══════════════════════════════════════════════════════════ NEUTRAL SCALE ══════════════════════════════════════════════════════════ */ --color-neutral-0: #FFFFFF; /* pure white — surface */ --color-neutral-50: #F5F5F0; /* off-white — spreadsheet bg ★ */ --color-neutral-100: #EBEAE3; /* column/row header bg */ --color-neutral-150: #E7E5DD; /* border-soft — inner cell dividers */ --color-border-subtle: #E5E5E5; /* app-shell border — webapp surfaces */ --color-neutral-200: #D0D0C8; /* border — grid lines ★ */ --color-neutral-300: #B0AFA8; /* decorative only */ --color-neutral-400: #8A8A82; /* muted-soft — decorative text */ --color-neutral-500: #555555; /* muted — body support (WCAG AAA 7.2:1) */ --color-neutral-600: #3A3A36; /* text-2 — secondary body */ --color-neutral-700: #1A1A1A; /* text — primary body ★ */ --color-neutral-900: #0F0F0D; /* near-black */ /* ══════════════════════════════════════════════════════════ SEMANTIC COLORS ══════════════════════════════════════════════════════════ */ --color-success: #2D7A3E; --color-success-soft: #E7F3E9; --color-danger: #C0392B; --color-danger-soft: #FDECEA; --color-warning: #B45309; --color-warning-soft: #FEF3C7; --color-info: #1D6FA8; --color-info-soft: #DBEAFE; /* ══════════════════════════════════════════════════════════ CONTEXTUAL / ALIAS TOKENS ══════════════════════════════════════════════════════════ */ /* Backgrounds */ --bg: var(--color-neutral-50); /* page background */ --bg-surface: var(--color-neutral-0); /* card / cell surface */ --bg-header: var(--color-neutral-100); /* spreadsheet row/col headers */ --bg-selected: var(--color-primary-soft); /* selected cell / active tab */ --bg-dark: #0F172A; /* dark hero (web app) */ /* Text */ --fg: var(--color-neutral-700); /* primary text */ --fg-2: var(--color-neutral-600); /* secondary text */ --fg-muted: var(--color-neutral-500); /* muted / supporting */ --fg-subtle: var(--color-neutral-400); /* decorative only */ --fg-on-accent: #FFFFFF; /* text on orange */ --fg-on-dark: #F1F5F9; /* text on dark bg */ /* Borders */ --border: var(--color-neutral-200); /* grid lines */ --border-soft: var(--color-neutral-150); /* inner cell dividers */ --border-focus: var(--color-primary-dark); /* focus ring */ /* Interactive */ --cta-bg: var(--fg); /* default CTA = black */ --cta-bg-primary: var(--color-primary-dark); /* primary CTA = orange */ /* Status */ --status-completed: var(--color-success); --status-pending: var(--color-warning); --status-failed: var(--color-danger); --status-processing: var(--color-primary); /* ══════════════════════════════════════════════════════════ TYPOGRAPHY ══════════════════════════════════════════════════════════ */ /* Font stacks */ --font-heading: 'Kyiv Type Sans', 'Inter', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Font sizes — fluid where applicable */ --text-xs: 11px; --text-sm: 12.5px; --text-base: 15.5px; --text-md: 17px; --text-lg: 21px; --text-xl: clamp(28px, 3vw, 36px); --text-2xl: clamp(34px, 4.4vw, 54px); /* h1 */ /* Line heights */ --leading-tight: 1.04; /* headings */ --leading-snug: 1.35; /* subheadings */ --leading-normal: 1.55; /* body */ --leading-relaxed: 1.7; /* long-form / descriptions */ /* Letter spacing */ --tracking-heading: -0.025em; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-wider: 0.06em; /* uppercase labels */ /* Font weights */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Semantic type roles */ --type-h1: var(--font-heading); /* 700, --text-2xl, --tracking-heading */ --type-h2: var(--font-heading); /* 700, --text-xl */ --type-h3: var(--font-heading); /* 700, --text-md */ --type-body: var(--font-body); /* 400, --text-base, --leading-normal */ --type-label: var(--font-mono); /* 500, --text-xs, --tracking-wider, uppercase */ --type-formula: var(--font-mono); /* 500, --text-sm */ --type-number: var(--font-mono); /* 600, --text-md, --tracking-tight */ --type-kicker: var(--font-mono); /* 400, --text-xs, uppercase, --tracking-wide */ /* ══════════════════════════════════════════════════════════ GEOMETRY & SPACING ══════════════════════════════════════════════════════════ */ /* Radius */ --radius-none: 0px; --radius-sm: 2px; /* spreadsheet default ★ */ --radius-md: 6px; --radius-lg: 8px; /* web app cards */ --radius-xl: 12px; /* web app hero stats */ --radius-pill: 20px; /* badges / pills */ --radius-full: 9999px; /* Shadows */ --shadow-cell: 0 1px 0 var(--border); --shadow-frame: 20px 20px 0 -1px rgba(10,10,10,.03), 20px 20px 0 0 var(--border); /* lifted paper */ --shadow-dropdown: 0 6px 0 -1px rgba(0,0,0,.04), 0 6px 0 0 var(--border); /* menu shadow */ --shadow-card: 0 2px 12px rgba(0,0,0,0.08); /* web app card */ --shadow-card-lg: 0 4px 20px rgba(0,0,0,0.12); /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Layout widths */ --max-w-content: 800px; --max-w-wide: 1000px; --max-w-hero: 1400px; /* Z-index layers */ --z-base: 1; --z-dropdown: 50; --z-sticky: 100; --z-overlay: 9999; /* Transitions */ --transition-fast: 0.15s ease-out; --transition-base: 0.2s ease; --transition-slow: 0.3s ease; } /* ══════════════════════════════════════════════════════════ SEMANTIC HTML ELEMENT DEFAULTS ══════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { overflow-x: hidden; max-width: 100vw; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); } /* Headings */ h1 { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-heading); color: var(--fg); } h2 { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: 1.1; letter-spacing: var(--tracking-tight); } h3 { font-family: var(--font-heading); font-size: var(--text-md); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); } h4 { font-family: var(--font-heading); font-size: var(--text-base); font-weight: var(--weight-semibold); } p { line-height: var(--leading-normal); color: var(--fg); } p + p { margin-top: var(--space-4); } /* Body support */ .text-secondary { color: var(--fg-2); } .text-muted { color: var(--fg-muted); } .text-subtle { color: var(--fg-subtle); } /* Monospace / data */ code, kbd, .mono { font-family: var(--font-mono); font-size: 0.88em; font-feature-settings: "ss03","cv11"; } kbd { background: var(--bg-surface); border: 1px solid var(--border); padding: 1px 5px; font-size: var(--text-xs); } /* Kicker (section label) */ .kicker { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-muted); letter-spacing: var(--tracking-wide); text-transform: uppercase; display: flex; align-items: center; gap: 10px; } .kicker::before { content: ""; width: 6px; height: 6px; background: var(--color-primary); display: inline-block; flex-shrink: 0; } /* Links */ a { color: var(--color-primary-dark); text-decoration: none; } a:hover { text-decoration: underline; } /* Selection */ ::selection { background: var(--color-primary-dark); color: #fff; } /* Focus */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }