/* ========================================================================== The Grechka — дизайн-токены Визуальный язык снят с принта «The Grechka Liquid»: пищевая этикетка, моноширинные данные, штрихкод. Отсюда роль моноширинного шрифта — это голос упаковки, а не декор. ========================================================================== */ :root { /* --- Схема по умолчанию: белая ------------------------------------------ Мятная схема оставлена переключаемой: см. [data-gr-scheme] ниже. Меняются только эти пять переменных, вся вёрстка общая. -------------------------------------------------------------------- */ --gr-ground: #ffffff; --gr-hero-bg: #ffffff; --gr-hero-fg: #101512; --gr-hero-em: #d4552a; --gr-quote-bg: #101512; --gr-quote-fg: #ffffff; /* --- Постоянные ------------------------------------------------------- */ --gr-ink: #101512; /* заголовки, типографика */ --gr-body: #2b3531; /* основной текст */ --gr-muted: #6d7a74; /* подписи, второстепенное */ --gr-line: #dde2df; /* разделители */ --gr-mint: #7fbaa3; /* логотип; фон под тёмным текстом — 9.45:1 */ --gr-mint-deep: #2e7d5f; /* кнопки; белый текст — 4.99:1, проходит AA */ --gr-mint-darker: #24614a; --gr-mint-tint: #eef6f2; --gr-orange: #d4552a; /* акцент с принта Grechka Orange */ /* --- Метрики ---------------------------------------------------------- */ --gr-tap: 44px; --gr-radius: 0px; /* прямые углы — как рамки на этикетке */ /* --- Шрифтовые роли --------------------------------------------------- */ --gr-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace; } /* Мятная схема — включается атрибутом на или . */ [data-gr-scheme="mint"] { --gr-hero-bg: #7fbaa3; --gr-hero-fg: #101512; --gr-hero-em: #ffffff; --gr-quote-bg: #7fbaa3; --gr-quote-fg: #101512; } /* Чёрная схема. */ [data-gr-scheme="dark"] { --gr-hero-bg: #101512; --gr-hero-fg: #ffffff; --gr-hero-em: #d4552a; --gr-quote-bg: #101512; --gr-quote-fg: #ffffff; }