/* ============================================================ Oleksii Lunkov — Design tokens Portable, self-contained core of the design system. Drop this file into any project to inherit the brand. Font loads from Google Fonts (Inter) — see index.html . Three colors, one typeface. No secondary palette. See DESIGN.md for the full system. ============================================================ */ :root { /* ---------- Brand color ---------- */ --accent: #FD543D; /* Coral / orange-red — the one brand color */ --accent-press: #E44229; /* Pressed / active */ --accent-hover: #FF6A55; /* Hover on dark surfaces */ --dark: #12212D; /* Deep navy — "the black" of the brand */ --dark-press: #0A151E; --white: #FFFFFF; --paper: #F5F3EF; /* Warm off-white card background */ /* The ONE sanctioned exception to the three-color rule: a status signal. Green carries meaning no brand color can ("available"). Darkened from #2FBF71, which measured 2.38:1 on white and failed WCAG 1.4.11's 3:1 minimum for non-text UI. #1E9E58 is 3.45:1. */ --status-ok: #1E9E58; --status-ok-ring: rgba(30, 158, 88, 0.18); /* ---------- Neutrals (hairlines, captions, secondary text only) ---------- */ --ink-100: #12212D; /* primary text */ --ink-80: #2B3845; /* secondary text */ --ink-60: #5B6770; /* muted / captions */ --ink-40: #9AA3AB; /* placeholder */ --ink-20: #D0D4D8; /* divider */ --ink-10: #E6E8EA; /* hairline */ --ink-05: #F1F2F4; /* surface alt (the gray strip) */ /* ---------- Semantic ---------- */ --fg-1: var(--ink-100); /* primary text */ --fg-2: var(--ink-80); /* secondary text */ --fg-3: var(--ink-60); /* muted / captions */ --fg-accent: var(--accent); /* Navy, not white. White on coral measures 3.22:1 and fails WCAG AA for normal-size text; navy on coral is 5.08:1. Coral is a light accent — treat it as a light surface and put dark text on it. */ --fg-on-accent: var(--dark); --fg-on-dark: var(--white); --fg-on-dark-muted: rgba(255,255,255,0.72); --bg-page: var(--white); --bg-card: var(--white); --bg-alt: var(--ink-05); --bg-dark: var(--dark); --bg-accent: var(--accent); --border-1: var(--ink-10); /* hairline */ --border-2: var(--ink-20); /* divider */ --border-on-dark: rgba(255,255,255,0.16); /* ---------- Type families ---------- ONE family for everything — contrast comes from weight, not from mixing fonts. Inter is chosen because it is a neutral Helvetica-class grotesque with full Latin + Cyrillic coverage, so English and Ukrainian render identically. (The previous display face, Pridi, contains ZERO Cyrillic glyphs — Ukrainian silently fell back to a different font. Do not reintroduce it.) */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; --font-display: var(--font-sans); /* kept as an alias so headings can diverge later */ --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace; /* ---------- Type scale (16px base) ---------- */ --fs-eyebrow: 0.75rem; /* 12 — UPPERCASE TRACKED LABELS */ --fs-caption: 0.8125rem; /* 13 */ --fs-small: 0.875rem; /* 14 */ --fs-body: 1rem; /* 16 */ --fs-body-lg: 1.125rem; /* 18 */ --fs-h4: 1.5rem; /* 24 */ --fs-h3: 2rem; /* 32 */ --fs-h2: 2.5rem; /* 40 */ --fs-h1: 3.25rem; /* 52 */ --fs-display: 4.5rem; /* 72 */ /* ---------- Tracking ---------- A grotesque like Inter needs progressively tighter tracking as size grows, otherwise large headings look loose. Small text stays at 0. */ --tracking-eyebrow: 0.14em; --tracking-display: -0.03em; /* 48px+ */ --tracking-tight: -0.025em; /* h1 */ --tracking-snug: -0.015em; /* h2 / h3 */ /* ---------- Line height ---------- */ --lh-display: 1.04; --lh-heading: 1.12; --lh-body: 1.55; --lh-tight: 1.2; /* ---------- Spacing (4px base) ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px; --s-11: 96px; --s-12: 128px; /* ---------- Radii ---------- */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-card: 16px; --r-pill: 999px; /* ---------- Shadows (sparingly) ---------- */ --shadow-1: 0 1px 2px rgba(18,33,45,0.06), 0 1px 1px rgba(18,33,45,0.04); --shadow-2: 0 6px 18px rgba(18,33,45,0.08), 0 2px 4px rgba(18,33,45,0.05); --shadow-3: 0 20px 60px rgba(18,33,45,0.18); /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --t-fast: 120ms; --t-base: 200ms; --t-slow: 380ms; /* ---------- Layout ---------- */ --container: 1200px; --container-narrow: 600px; /* the link-hub reading column */ } /* ============================================================ Base + semantic typography ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; background: var(--bg-page); color: var(--fg-1); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); /* Inter is a variable font with optical sizing — let it adapt to size. */ font-optical-sizing: auto; } h1, h2, h3, h4, p { margin: 0; } .t-display { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tracking-display); color: var(--fg-1); } .t-h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--tracking-tight); color: var(--fg-1); } .t-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--tracking-snug); color: var(--fg-1); } .t-h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-heading); letter-spacing: var(--tracking-snug); color: var(--fg-1); } .t-h4 { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h4); line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--fg-1); } .t-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); } .t-body-lg { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--fg-2); } .t-small { font-family: var(--font-sans); font-size: var(--fs-small); line-height: var(--lh-body); color: var(--fg-3); } .t-caption { font-family: var(--font-sans); font-size: var(--fs-caption); line-height: 1.4; color: var(--fg-3); } /* Uppercase tracked label — "ABOUT ME", "CONNECT", "FEATURED IN" */ .t-eyebrow { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-eyebrow); line-height: 1.4; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-3); } strong, b { font-weight: 700; color: var(--fg-1); } em { font-style: italic; } a { color: var(--fg-accent); text-decoration: none; transition: color var(--t-fast) var(--ease-out); } a:hover { color: var(--accent-press); } ::selection { background: var(--accent); color: var(--white); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }