:root {
    /* Gallery Bone & Brand Logo Palette */
    --bg-bone: #F4F2EC;
    --bg-vellum: rgba(250, 249, 245, 0.86);
    --bg-pure: #FFFFFF;

    --ink-obsidian: #111113;
    --ink-slate: #54565E;
    --ink-ghost: #8E9099;

    --signal-orange: #FF5500;
    --signal-orange-soft: rgba(255, 85, 0, 0.08);

    --rule-hairline: rgba(17, 17, 19, 0.14);
    --rule-solid: #111113;

    /* Typography — Unbounded + Onest + JetBrains Mono (Full UA Cyrillic) */
    --font-display: 'Unbounded', sans-serif;
    --font-body: 'Onest', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    --header-h: 68px;
    --ease-luxury: cubic-bezier(0.19, 1, 0.22, 1);
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    background-color: var(--bg-bone);
    color: var(--ink-obsidian);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-h);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
}

body {
    position: relative;
    min-height: 100vh;
    background-color: var(--bg-bone);
    color: var(--ink-obsidian);
    padding-top: var(--header-h);
    overflow-x: hidden;
}

::selection {
    background-color: var(--signal-orange);
    color: #FFFFFF;
}

.scroll-line {
    position: fixed;
    top: var(--header-h);
    left: 0;
    height: 2px;
    width: 0%;
    background: var(--signal-orange);
    z-index: 950;
}