/* ══════════════════════════════════════════════════════════════════ Вкуснофф — дизайн-система. Токены и ничего кроме токенов. Правило: ни один компонент не содержит литерального цвета, тени, радиуса или кривой. Всё берётся отсюда. Основание — палитра клиента: cream #F7F4EF · sand #E7DFD1 · khaki #9C906C terra #C2562E · ochre #CEA14A · deep #4A3B2E ══════════════════════════════════════════════════════════════════ */ :root{ /* ── 1. цветовые лестницы ───────────────────────────────────── У каждого фирменного цвета есть светлые родственники: они держат свечения, подложки бейджей и заливки состояний. Тёмные — текст. */ /* терракота — действие: кнопки, цены, акценты */ --terra-50: #FEF8F5; --terra-100: #FBEDE6; --terra-200: #F5D8C9; --terra-300: #EAB79E; --terra-400: #DA8558; --terra-500: #C2562E; /* база клиента */ --terra-600: #A5471F; --terra-700: #833718; --terra-800: #5E2711; /* охра — второй акцент: рейтинг, бейдж «хит» */ --ochre-50: #FEFBF3; --ochre-100: #FAF1DC; --ochre-200: #F1DFAE; --ochre-300: #E2C173; --ochre-500: #CEA14A; /* база клиента */ --ochre-700: #9A7326; /* хаки — фирменный беж: рамки, метки, крупный декор. 3,2:1 на белом, поэтому мелкий текст только на -700 */ --khaki-100: #F1EEE5; --khaki-200: #E2DCCB; --khaki-300: #C9BFA4; --khaki-500: #9C906C; /* база клиента */ --khaki-700: #7A7053; --khaki-800: #5D553D; /* тёплый нейтральный: бумага, песок, какао */ --n-0: #FFFFFF; --n-25: #FCFAF7; --n-50: #F7F4EF; /* cream клиента */ --n-100: #F1ECE3; --n-200: #E7DFD1; /* sand клиента */ --n-300: #D6CBB6; --n-500: #8C7F6D; --n-600: #6F6353; --n-700: #574B3D; --n-800: #4A3B2E; /* deep клиента */ --n-900: #2F251C; --n-950: #221A13; --ok-500: #4C6B3C; --ok-100: #EBF1E5; /* ── 2. роли ────────────────────────────────────────────────── Компоненты обращаются только к ролям, не к лестницам. */ --sur-page: var(--n-25); --sur-raised: var(--n-0); --sur-sunken: var(--n-50); --sur-quiet: var(--n-100); --sur-deep: var(--n-900); --sur-brand: var(--terra-500); --sur-tint: var(--terra-50); --ink: var(--n-800); --ink-strong: var(--n-900); --ink-soft: var(--n-600); --ink-faint: var(--n-500); --ink-invert: var(--n-50); --ink-brand: var(--terra-600); --edge: var(--n-200); --edge-soft: var(--n-100); --edge-brand: var(--terra-200); --accent: var(--terra-500); --accent-hi: var(--terra-600); --accent-lo: var(--terra-100); --accent-2: var(--ochre-500); --accent-2-lo: var(--ochre-100); /* ── 3. тени — только фирменного тона, никогда серые ───────── Тон взят из --n-800 (74 59 46) и --terra-500 (194 86 46). */ --shadow-hue: 74 59 46; --shadow-brand: 194 86 46; --sh-0: none; --sh-1: 0 1px 2px rgb(var(--shadow-hue) / .05), 0 2px 7px -3px rgb(var(--shadow-hue) / .10); --sh-2: 0 1px 2px rgb(var(--shadow-hue) / .05), 0 6px 14px -6px rgb(var(--shadow-hue) / .14), 0 18px 34px -22px rgb(var(--shadow-hue) / .20); --sh-3: 0 2px 4px rgb(var(--shadow-hue) / .06), 0 12px 26px -10px rgb(var(--shadow-hue) / .18), 0 34px 60px -30px rgb(var(--shadow-hue) / .28); --sh-4: 0 4px 8px rgb(var(--shadow-hue) / .07), 0 22px 44px -14px rgb(var(--shadow-hue) / .22), 0 60px 96px -40px rgb(var(--shadow-hue) / .34); --sh-inset: inset 0 1px 0 rgb(255 255 255 / .7), inset 0 -1px 0 rgb(var(--shadow-hue) / .05); /* свечения — светлые родственники бренда */ --glow-brand: 0 6px 16px -6px rgb(var(--shadow-brand) / .40), 0 16px 34px -16px rgb(var(--shadow-brand) / .30); --glow-brand-s:0 3px 10px -4px rgb(var(--shadow-brand) / .34); --glow-ochre: 0 6px 18px -8px rgb(206 161 74 / .45); --ring-brand: 0 0 0 3px var(--terra-100); --ring-ochre: 0 0 0 3px var(--ochre-100); /* ── 4. градиенты ──────────────────────────────────────────── Подложка страницы дышит теплом, не заливкой. */ --grad-page: radial-gradient(1200px 620px at 78% -8%, rgb(206 161 74 / .11), transparent 62%), radial-gradient(980px 560px at 6% 2%, rgb(194 86 46 / .07), transparent 58%), linear-gradient(180deg, var(--n-25) 0%, var(--n-0) 42%); --grad-cream: linear-gradient(180deg, var(--n-50) 0%, var(--n-100) 100%); --grad-deep: radial-gradient(760px 420px at 84% 6%, rgb(194 86 46 / .20), transparent 60%), linear-gradient(168deg, var(--n-900) 0%, var(--n-950) 100%); --grad-brand: linear-gradient(135deg, var(--terra-400) 0%, var(--terra-500) 46%, var(--terra-600) 100%); --grad-tile: radial-gradient(120% 90% at 12% 8%, rgb(255 255 255 / .70), transparent 58%), radial-gradient(90% 80% at 92% 96%, rgb(194 86 46 / .16), transparent 62%), linear-gradient(150deg, rgb(255 255 255 / .30) 0%, rgb(247 244 239 / .10) 46%, rgb(156 144 108 / .20) 100%); --grad-sheen: linear-gradient(180deg, rgb(255 255 255 / .9), rgb(255 255 255 / 0) 60%); --grad-fade-r: linear-gradient(90deg, rgb(255 255 255 / 0), var(--n-0) 76%); /* полупрозрачные слои: на тёмном блоке, на плитке, на подложке модалок. Тоже токены — компонент не должен знать ни одного литерального цвета. */ --on-deep-1: rgb(255 255 255 / .05); --on-deep-2: rgb(255 255 255 / .07); --on-deep-3: rgb(255 255 255 / .10); --on-deep-4: rgb(255 255 255 / .24); --on-deep-5: rgb(255 255 255 / .28); --on-deep-6: rgb(255 255 255 / .50); --sheen-1: rgb(255 255 255 / .55); --sheen-2: rgb(255 255 255 / .60); --tile-hatch: rgb(156 144 108 / .09); --brand-wash: rgb(194 86 46 / .22); --scrim: rgb(47 37 28 / .5); /* ── 5. радиусы ───────────────────────────────────────────────── */ --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-2xl: 40px; --r-pill: 999px; /* ── 6. шаг сетки и воздух ───────────────────────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; --gap: clamp(var(--s-3), 1.2vw, var(--s-5)); --gap-l: clamp(var(--s-6), 2.6vw, var(--s-12)); --sec: clamp(var(--s-16), 8.5vw, 148px); /* воздух между блоками */ --pad: clamp(var(--s-4), 3.6vw, 56px); --max: 1360px; --max-narrow: 780px; /* ── 7. типографика ──────────────────────────────────────────── */ --ff-ui: 'Onest', -apple-system, 'Segoe UI', system-ui, sans-serif; --ff-dsp: 'Literata', Georgia, 'Times New Roman', serif; --fs-xs: .75rem; --fs-sm: .84rem; --fs-base: .95rem; --fs-md: 1.02rem; --fs-lg: clamp(1.08rem, .5vw + .95rem, 1.22rem); --fs-h3: clamp(1.18rem, 1.1vw + .9rem, 1.5rem); --fs-h2: clamp(1.95rem, 2.6vw + .7rem, 3.1rem); --fs-h1: clamp(2.3rem, 3.6vw + 1rem, 4.4rem); --fs-mega: clamp(2.6rem, 6.4vw, 5.4rem); --lh-tight: 1.06; --lh-head: 1.14; --lh-body: 1.62; --ls-tight: -.022em; --ls-wide: .12em; /* ── 8. движение — одна кривая на весь сайт ──────────────────── */ --ease: cubic-bezier(.2,.8,.25,1); --t-fast: 140ms; --t: 220ms; --t-slow: 420ms; --lift: -5px; --lift-soft: -3px; /* ── 9. слои ─────────────────────────────────────────────────── */ --z-base: 1; --z-raised: 5; --z-sticky: 40; --z-bar: 45; --z-over: 60; --z-modal: 70; } /* подложки плиток: обложка раздела, размытая до фактуры. Живёт в токенах, потому что это часть системы, а не компонента. */ [data-tile="nabory"] { --tile: url(../img/tile/nabory.webp) } [data-tile="kanape"] { --tile: url(../img/tile/kanape.webp) } [data-tile="salaty"] { --tile: url(../img/tile/salaty.webp) } [data-tile="holodnye"] { --tile: url(../img/tile/holodnye.webp) } [data-tile="goryachie"] { --tile: url(../img/tile/goryachie.webp) } [data-tile="sendvichi"] { --tile: url(../img/tile/sendvichi.webp) } [data-tile="deserty"] { --tile: url(../img/tile/deserty.webp) } [data-tile="garniry"] { --tile: url(../img/tile/garniry.webp) } [data-tile="napitki"] { --tile: url(../img/tile/napitki.webp) } [data-tile="posuda"] { --tile: url(../img/tile/posuda.webp) } [data-tile="personal"] { --tile: url(../img/tile/personal.webp) } [data-tile="detskoe"] { --tile: url(../img/tile/detskoe.webp) } [data-tile="postnye"] { --tile: url(../img/tile/postnye.webp) } [data-tile="vypechka"] { --tile: url(../img/tile/vypechka.webp) } [data-tile="lanch"] { --tile: url(../img/tile/lanch.webp) } [data-tile="arenda-posudy"] { --tile: url(../img/tile/arenda-posudy.webp) } [data-tile="arenda-mebeli"] { --tile: url(../img/tile/arenda-mebeli.webp) }