/* ============================================================ DStudio — Design tokens Концепция: два слоя. «Двигун» — глубокая тьма машинного зала. «Вітрина» — светлый дневной свет. Страница дышит между ними. ============================================================ */ :root { /* ---------- Ink — колір водолазки: глибокий теплий чорний ---------- */ --ink-1000: #0B0A0A; /* абсолютна глибина */ --ink-950: #100F0E; --ink-900: #161413; /* базовий темний = водолазка */ --ink-850: #1D1B19; --ink-800: #252220; /* картки на темному */ --ink-700: #302C29; --ink-600: #3D3835; /* ---------- Paper — тепла бумага ---------- */ --paper-0: #FFFFFF; --paper-50: #F5F2EC; --paper-100: #EDE9E1; --paper-200: #DFD9CF; --paper-300: #C9C2B6; /* ---------- Studio — фон портрета, знятий з фотографії ---------- */ --studio-hi: #9A9999; /* світлова пляма за фігурою */ --studio-mid: #8A8A8A; --studio-lo: #706F6F; --studio-deep: #5A5959; /* віньєтка по краях */ --suit: #8F8380; /* колір піджака */ /* ---------- Text ---------- */ --text-on-dark: #F3F0EA; --text-on-dark-muted: #A9A39B; --text-on-dark-faint: #726C65; --text-on-light: #161413; --text-on-light-muted: #56514B; --text-on-light-faint: #8A847C; /* ---------- Нейтральні відтінки замість хроматичного акценту ---------- Палітра монохромна — колір на сторінку приносять лише скріншоти робіт. */ --volt-400: #B4AEA6; --volt-500: #6E6862; --volt-600: #443F3A; --volt-700: #2A2623; /* Приглушені сигнальні — латунь, мох, цегла. Майже сірі, але помітні */ --amber-400: #C4A874; --amber-500: #9A8256; --amber-600: #7A6540; --mint-400: #9FB09B; --mint-500: #6E7A6B; --coral-500: #8A5C55; /* ---------- Semantic ---------- */ /* --accent перевизначається в кожному шарі: темний на світлому, світлий на темному */ --accent: #161413; --accent-contrast: #F5F2EC; --accent-strong: #0B0A0A; --accent-soft: rgba(22,20,19,.24); /* ---------- Glow / Glass ---------- */ --glow-volt: 0 0 0 1px rgba(255,255,255,.16), 0 12px 48px - 14px rgba(0,0,0,.55); --glass-dark: rgba(255,255,255,.05); --glass-dark-border: rgba(255,255,255,.10); --glass-light: rgba(22,20,19,.04); --glass-light-border: rgba(22,20,19,.11); /* ---------- Elevation ---------- */ --shadow-sm: 0 1px 2px rgba(11,10,10,.28); --shadow-md: 0 8px 24px - 8px rgba(11,10,10,.40); --shadow-lg: 0 24px 64px - 20px rgba(11,10,10,.55); --shadow-xl: 0 48px 120px - 32px rgba(11,10,10,.68); --shadow-screen: 0 40px 100px - 26px rgba(11,10,10,.62), 0 1px 0 0 rgba(255,255,255,.10) inset; /* ---------- Type ---------- */ --font-display: 'Manrope', 'Onest', system-ui, sans-serif; --font-sans: 'Onest', 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; /* Фluid-шкала: clamp(min, preferred, max) */ --t-hero: clamp(2.4rem, 1.15rem + 3.5vw, 4.75rem); --t-h1: clamp(2rem, 1.15rem + 2.8vw, 3.75rem); --t-h2: clamp(1.7rem, 1.1rem + 2vw, 2.9rem); --t-h3: clamp(1.35rem, 1rem + 1.4vw, 2rem); --t-h4: clamp(1.1rem, .95rem + .7vw, 1.4rem); --t-lead: clamp(1.05rem, .95rem + .6vw, 1.375rem); --t-body: clamp(.975rem, .93rem + .22vw, 1.0625rem); --t-small: .875rem; --t-micro: .75rem; --lh-tight: 1.02; --lh-snug: 1.16; --lh-body: 1.62; --ls-hero: -.035em; --ls-head: -.025em; --ls-body: -.008em; --ls-eyebrow: .16em; /* ---------- Space (8px база) ---------- */ --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.5rem; --s-8: 3rem; --s-9: 4rem; --s-10: 5rem; --s-11: 6.5rem; --s-12: 8rem; --s-13: 10rem; --s-14: 12.5rem; --header-h: clamp(4.25rem, 3.4rem + 1.6vw, 5.5rem); --section-y: clamp(4.5rem, 3rem + 7vw, 10rem); --gutter: clamp(1.25rem, .6rem + 2.6vw, 4rem); --maxw: 1320px; --maxw-text: 68ch; /* ---------- Radius ---------- */ --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-2xl: 44px; --r-pill: 999px; /* ---------- Motion ---------- */ /* Единая «физика» интерфейса: всё замедляется мягко, ничего не дёргается */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out:cubic-bezier(.65, 0, .35, 1); --ease-spring:cubic-bezier(.34, 1.56, .64, 1); --d-fast: .18s; --d-base: .32s; --d-slow: .6s; --d-reveal:.9s; --border-hairline: 1px solid var(--glass-dark-border); } /* Светлая секция переопределяет семантику, а не хардкодит цвета */ .layer-light { --accent-soft: rgba(22,20,19,.62); --accent: var(--ink-900); --accent-contrast: var(--paper-50); --bg: var(--paper-50); --bg-raised: var(--paper-0); --fg: var(--text-on-light); --fg-muted: var(--text-on-light-muted); --fg-faint: var(--text-on-light-faint); --hairline: var(--glass-light-border); --glass: var(--glass-light); } .layer-dark { --accent-soft: rgba(245,242,236,.58); --accent: var(--paper-50); --accent-contrast: var(--ink-900); --bg: var(--ink-900); --bg-raised: var(--ink-800); --fg: var(--text-on-dark); --fg-muted: var(--text-on-dark-muted); --fg-faint: var(--text-on-dark-faint); --hairline: var(--glass-dark-border); --glass: var(--glass-dark); } /* Студійний шар — фон дослівно повторює фон портрета, тому фігура стоїть на ньому без жодного стику */ .layer-studio { --accent-soft: rgba(19,17,16,.66); --accent: var(--ink-900); --accent-contrast: var(--paper-50); --bg: var(--studio-mid); --bg-raised: rgba(255,255,255,.10); --fg: #131110; --fg-muted: #3A3634; --fg-faint: #56514D; --hairline: rgba(19,17,16,.18); --glass: rgba(255,255,255,.13); } .layer-void { --accent-soft: rgba(245,242,236,.58); --accent: var(--paper-50); --accent-contrast: var(--ink-1000); --bg: var(--ink-1000); --bg-raised: var(--ink-850); --fg: var(--text-on-dark); --fg-muted: var(--text-on-dark-muted); --fg-faint: var(--text-on-dark-faint); --hairline: var(--glass-dark-border); --glass: var(--glass-dark); } @media (prefers-reduced-motion: reduce) { :root { --d-fast: .01ms; --d-base: .01ms; --d-slow: .01ms; --d-reveal: .01ms; } }