/* ========================================================================== DALA GOURMET — дизайн-токены -------------------------------------------------------------------------- Все цвета взяты из фирменного гайда «Dala Gourmet Guide.pdf» (вытащены из векторных заливок макета, поэтому совпадают точно). Три слоя: 1. Примитивы — сырые цвета бренда. Менять только если поменялся гайд. 2. Семантика — назначение цвета. Здесь решается «что каким цветом». 3. Компоненты — конкретные элементы. Точечная настройка кнопок, карточек. В styles.css не должно быть ни одного сырого HEX — только var(--...). ========================================================================== */ :root { /* ====================================================================== СЛОЙ 1. ПРИМИТИВЫ — палитра из гайда ====================================================================== */ /* Персиковый — главный узнаваемый фон бренда (фон 36 страниц гайда) */ --dg-peach-50: #FFF9F3; /* производный, самый светлый */ --dg-peach-100: #FFF0E2; /* из гайда */ --dg-peach-200: #FFE4CC; /* из гайда — фирменный персиковый */ --dg-peach-300: #FFD3AA; /* из гайда */ --dg-peach-400: #FFC28A; /* из гайда */ /* Янтарный — цвет логотипа */ --dg-amber-300: #E8B98A; /* производный */ --dg-amber-400: #E0A167; /* из гайда */ --dg-amber-500: #D08E4F; /* производный, наведение */ --dg-amber-600: #B87A3D; /* производный, нажатие */ /* Терракота — дополнительный акцент */ --dg-clay-500: #CE6C47; /* из гайда */ --dg-clay-600: #B45932; /* производный */ /* Бордо — основной акцент гайда (100 использований) */ --dg-wine-300: #AC6766; /* из гайда */ --dg-wine-400: #905C5C; /* из гайда */ --dg-wine-500: #7E5151; /* из гайда */ --dg-wine-600: #764949; /* из гайда — базовый бордо */ --dg-wine-700: #5E3939; /* производный, наведение */ --dg-wine-800: #472B2B; /* производный, нажатие */ /* Графит — текст и тёмные полосы */ --dg-ink-900: #2C2C2C; /* из гайда — основной текст */ --dg-ink-800: #404038; /* из гайда */ --dg-ink-600: #6B6259; /* производный, приглушённый текст */ --dg-ink-400: #A8A8A8; /* из гайда */ --dg-ink-200: #DDDDDD; /* из гайда */ /* Зелёный — редкий акцент гайда, у нас для «в наличии»/подтверждений */ --dg-green-600: #3D614B; /* из гайда */ --dg-green-100: #E6EDE7; /* производный */ /* Нейтральные */ --dg-white: #FFFFFF; --dg-cream: #F8F5EE; /* из гайда */ --dg-sand-100: #F2E3D2; /* производный — границы на персиковом */ /* Внешние сервисы */ --dg-whatsapp: #25D366; --dg-whatsapp-dark: #1EBE5A; /* ====================================================================== СЛОЙ 2. СЕМАНТИКА — назначение ====================================================================== */ /* Поверхности */ --color-surface: var(--dg-white); /* карточки, основной фон */ --color-surface-page: var(--dg-peach-50); /* фон страницы */ --color-surface-warm: var(--dg-peach-200); /* фирменные секции */ --color-surface-soft: var(--dg-peach-100); /* мягкая подложка */ --color-surface-dark: var(--dg-ink-900); /* подвал, тёмные блоки */ /* Текст */ --color-text: var(--dg-ink-900); --color-text-muted: var(--dg-ink-600); --color-text-invert: var(--dg-white); --color-text-on-warm: var(--dg-wine-700); /* текст на персиковом */ /* Бренд */ --color-primary: var(--dg-wine-600); /* основное действие */ --color-primary-hover: var(--dg-wine-700); --color-primary-active: var(--dg-wine-800); --color-accent: var(--dg-amber-400); /* логотип, метки */ --color-accent-hover: var(--dg-amber-500); --color-clay: var(--dg-clay-500); /* Служебные */ --color-border: var(--dg-sand-100); --color-border-strong: var(--dg-peach-300); --color-success: var(--dg-green-600); --color-success-soft: var(--dg-green-100); --color-danger: var(--dg-clay-600); --color-focus: var(--dg-wine-600); /* Типографика — пара из фирменного гайда: Igra Sans — основной шрифт (текст и заголовки); Playfair Display Italic — акцентный, только на выделенных словах. Igra Sans не раздаётся через Google Fonts. Когда появятся файлы шрифта: 1. положите их в assets/fonts/; 2. раскомментируйте блок @font-face в начале styles.css. До этого в стеке работает Manrope — ближайшее доступное начертание. Больше нигде шрифты менять не нужно. */ --font-body: "Igra Sans", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --font-display: var(--font-body); --font-accent: "Playfair Display", "Times New Roman", Georgia, serif; /* Шкала размеров (шаг ~1.25) */ --text-xs: 12px; --text-sm: 13.5px; --text-base: 16px; --text-md: 18px; --text-lg: 21px; --text-xl: 26px; --text-2xl: clamp(24px, 3.2vw, 34px); --text-3xl: clamp(30px, 4.6vw, 46px); --text-4xl: clamp(36px, 6vw, 68px); --leading-tight: 1.12; --leading-snug: 1.3; --leading-body: 1.6; --tracking-wide: .08em; --tracking-wider: .16em; /* логотип и надзаголовки */ /* Отступы */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* Скругления */ --radius-xs: 8px; --radius-sm: 12px; --radius-md: 18px; --radius-lg: 26px; --radius-pill: 999px; /* Тени — тёплые, в тон бренду */ --shadow-sm: 0 2px 10px rgba(118, 73, 73, .07); --shadow-md: 0 12px 32px rgba(118, 73, 73, .11); --shadow-lg: 0 24px 60px rgba(118, 73, 73, .18); /* Раскладка */ --wrap: 1180px; --header-h: 76px; /* Движение */ --ease: cubic-bezier(.4, 0, .2, 1); --dur-fast: .15s; --dur: .25s; --dur-slow: .4s; /* ====================================================================== СЛОЙ 3. КОМПОНЕНТЫ ====================================================================== */ /* Кнопки */ --btn-primary-bg: var(--color-primary); --btn-primary-bg-hover: var(--color-primary-hover); --btn-primary-fg: var(--color-text-invert); --btn-primary-shadow: 0 8px 20px rgba(118, 73, 73, .28); --btn-ghost-bg: var(--color-surface); --btn-ghost-fg: var(--color-text); --btn-ghost-border: var(--color-border-strong); --btn-wa-bg: var(--dg-whatsapp); --btn-wa-bg-hover: var(--dg-whatsapp-dark); /* Карточка товара */ --card-bg: var(--color-surface); --card-border: var(--color-border); --card-radius: var(--radius-md); --card-shadow: var(--shadow-sm); --card-shadow-hover: var(--shadow-md); --card-media-bg: var(--color-surface-soft); /* Раскрывающийся раздел каталога */ --accordion-bg: var(--color-surface); --accordion-bg-open: var(--color-surface-soft); --accordion-border: var(--color-border); --accordion-title: var(--color-text); --accordion-title-open: var(--color-primary); --accordion-count-bg: var(--color-surface-warm); --accordion-count-fg: var(--color-text-on-warm); /* Корзина */ --fab-bg: var(--color-primary); --fab-bg-hover: var(--color-primary-hover); --fab-fg: var(--color-text-invert); --fab-shadow: 0 12px 28px rgba(118, 73, 73, .38); --badge-bg: var(--color-clay); --badge-fg: var(--color-text-invert); --drawer-bg: var(--color-surface-page); --drawer-head-bg: var(--color-surface); --overlay-bg: rgba(44, 44, 44, .5); /* Поля ввода */ --field-bg: var(--color-surface); --field-border: var(--color-border-strong); --field-border-focus: var(--color-primary); --field-radius: var(--radius-xs); }