/* ============================================================================ dn-type.css — ТИПОГРАФИКА на переменных: два пресета dnm (наша) и dn3 (d3). Грузится между dn-theme.css (даёт --font-*) и dn-ui.css. ПЕРЕКЛЮЧЕНИЕ: • классом-контейнером — вся страница или отдельный блок: ... (весь сайт на d3) (только блок на d3) по умолчанию активен dnm (через :root). • ИЛИ правкой файла: закомментировать блок «:root → dnm» и раскомментировать «:root → dn3» (тогда дефолт станет d3). Роли: eyebrow · display(H1) · h2 · h3 · lead · body · mono(данные) · serif(lore). Где у одной стороны роли нет — берём ближайшую (см. комментарии). ============================================================================ */ /* -------- ПРЕСЕТ dnm (наша) — ДЕФОЛТ -------- */ :root, .type-dnm { --ty-eyebrow-ff: var(--font-mono); --ty-eyebrow-fs: 12px; --ty-eyebrow-ls: .14em; --ty-eyebrow-tt: uppercase; --ty-display-ff: var(--font-display); --ty-display-fs: clamp(36px, 4.8vw, 66px); --ty-display-lh: 1.06; --ty-display-fw: 700; --ty-display-ls: .005em; --ty-h2-ff: var(--font-display); --ty-h2-fs: clamp(26px, 2.8vw, 40px); --ty-h2-lh: 1.14; --ty-h2-fw: 600; --ty-h3-ff: var(--font-sans); --ty-h3-fs: 18px; --ty-h3-fw: 700; --ty-lead-ff: var(--font-sans); --ty-lead-fs: 18px; --ty-lead-lh: 1.6; --ty-body-ff: var(--font-sans); --ty-body-fs: 15px; --ty-body-lh: 1.6; --ty-mono-ff: var(--font-mono); --ty-serif-ff: var(--font-serif); /* Cormorant — у нас есть lore-serif */ } /* -------- ПРЕСЕТ dn3 (d3) -------- */ /* (чтобы сделать d3 дефолтом — перенести значения в :root выше / закомментировать dnm) */ .type-dn3 { --ty-eyebrow-ff: var(--font-mono); --ty-eyebrow-fs: 12px; --ty-eyebrow-ls: normal; --ty-eyebrow-tt: uppercase; /* d3: без разрядки */ --ty-display-ff: var(--font-display); --ty-display-fs: clamp(42px, 5.4vw, 82px); --ty-display-lh: 1.03; --ty-display-fw: 700; --ty-display-ls: 0; --ty-h2-ff: var(--font-display); --ty-h2-fs: clamp(28px, 3vw, 46px); --ty-h2-lh: 1.12; --ty-h2-fw: 700; --ty-h3-ff: var(--font-sans); --ty-h3-fs: 18px; --ty-h3-fw: 700; --ty-lead-ff: var(--font-sans); --ty-lead-fs: 19px; --ty-lead-lh: 1.62; --ty-body-ff: var(--font-sans); --ty-body-fs: 15px; --ty-body-lh: 1.62; --ty-mono-ff: var(--font-mono); --ty-serif-ff: var(--font-display); /* у d3 нет serif → ближайший = Unbounded */ } /* -------- роль-классы (консьюмеры токенов) -------- */ .ty-eyebrow { font-family: var(--ty-eyebrow-ff); font-size: var(--ty-eyebrow-fs); letter-spacing: var(--ty-eyebrow-ls); text-transform: var(--ty-eyebrow-tt); } .ty-display { font-family: var(--ty-display-ff); font-size: var(--ty-display-fs); line-height: var(--ty-display-lh); font-weight: var(--ty-display-fw); letter-spacing: var(--ty-display-ls); } .ty-h2 { font-family: var(--ty-h2-ff); font-size: var(--ty-h2-fs); line-height: var(--ty-h2-lh); font-weight: var(--ty-h2-fw); } .ty-h3 { font-family: var(--ty-h3-ff); font-size: var(--ty-h3-fs); font-weight: var(--ty-h3-fw); } .ty-lead { font-family: var(--ty-lead-ff); font-size: var(--ty-lead-fs); line-height: var(--ty-lead-lh); } .ty-body { font-family: var(--ty-body-ff); font-size: var(--ty-body-fs); line-height: var(--ty-body-lh); } .ty-mono { font-family: var(--ty-mono-ff); } .ty-serif { font-family: var(--ty-serif-ff); }