/* tokens.css — sirka-courses PAGE-SCAFFOLD is the SOLE owner of this file. Section stylesheets REUSE these tokens and never redefine them; a section that needs a value no page token carries declares its own ---* token inside css/sections/.css, in ALL THREE bands. Every number here is a Figma node value from brief-page.md 4.3 / 4.3a / 4.4 / 4.5. Formulas are pipeline/components/fluid-formulas.md, instantiated in brief-page.md 4.1a: mobile 0-767 clamp(M-min, calc(M-base + (max-vw - 375px) * 0.015), M-max) tablet 768-1023 clamp(M-base, calc(M-base + (max-vw - 768px) * 0.025), D-base) PSEUDO desktop 1024+ clamp(D-min, calc(D-base * (max-vw / vw-base)), D-max) has-tablet-layer: false, so 768-1023 is INTERPOLATED. It is also this page's highest-risk band because no stage measures it: EVERY fluid token below is declared in all three. */ :root { /* ---- scaling system ---------------------------------------------------- */ --vw-base: 1520px; /* desktop frame, the desktop divisor */ --max-vw: min(100vw, calc(1920px + calc((1920px - var(--vw-base)) * 0.015))); /* cap 1926px */ /* ---- families (brief 4.2 — both on Google Fonts WITH cyrillic subsets) -- */ --font-display: "Oswald", "Arial Narrow", Impact, sans-serif; --font-body: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif; /* ---- colour (brief 4.4 — the page is monochrome: no accent, no gradient, no shadow anywhere in the file) ---------------------------------- */ --c-bg: #ffffff; --c-ink: #232323; --c-ink-alt: #252627; --c-hairline: #000000; --c-muted: #bdbdbd; --c-ink-70: rgba(35, 35, 35, 0.70); --c-ink-50: rgba(35, 35, 35, 0.50); --c-ink-30: rgba(35, 35, 35, 0.30); --c-ink-20: rgba(35, 35, 35, 0.20); --c-alt-70: rgba(37, 38, 39, 0.70); --c-white-70: rgba(255, 255, 255, 0.70); --c-white-60: rgba(255, 255, 255, 0.60); --c-white-50: rgba(255, 255, 255, 0.50); --c-white-30: rgba(255, 255, 255, 0.30); --c-scrim: rgba(0, 0, 0, 0.20); /* Section headings change INK across layers by design (brief 4.3b-2): all ten fill #232323 on mobile and #252627 on desktop. Bound to the band, never unified. */ --c-heading: var(--c-ink); /* ---- borders / radii (brief 4.4a) ------------------------------------- */ --bw-hairline: 1px; /* 1px solid #000 CENTER — the page's main border */ --r-pill: 9999px; /* the ONLY rounded shape; never transcribe Figma's 46.67/60.67/70/100 */ --r-flat: 0; /* no card, panel, image or button has a radius */ /* ---- rhythm (brief 4.5) ----------------------------------------------- */ --gutter: 20px; /* mobile, drawn */ --grid-gap: 20px; /* 20 on BOTH layers — fixed, deliberately NOT clamped */ --section-gap: 50px; /* mobile: exact, all 10 boundaries */ /* ---- typography: MOBILE band (0-767) ---------------------------------- */ --text-h1: clamp(47px, calc(55px + (var(--max-vw) - 375px) * 0.015), 112px); --text-h2: clamp(24px, calc(28px + (var(--max-vw) - 375px) * 0.015), 57px); --text-stat-xl: clamp(31px, calc(36px + (var(--max-vw) - 375px) * 0.015), 74px); --text-stat: clamp(31px, calc(36px + (var(--max-vw) - 375px) * 0.015), 74px); --text-price: clamp(27px, calc(32px + (var(--max-vw) - 375px) * 0.015), 65px); --text-logo: clamp(19px, calc(22.06px + (var(--max-vw) - 375px) * 0.015), 45px); --text-h3: clamp(15px, calc(18px + (var(--max-vw) - 375px) * 0.015), 37px); --text-h4: clamp(12px, calc(14px + (var(--max-vw) - 375px) * 0.015), 29px); --text-h5: clamp(14px, calc(16px + (var(--max-vw) - 375px) * 0.015), 33px); --text-label: clamp(14px, calc(16px + (var(--max-vw) - 375px) * 0.015), 33px); --text-btn: clamp(12px, calc(14px + (var(--max-vw) - 375px) * 0.015), 29px); --text-body-lg: clamp(14px, calc(16px + (var(--max-vw) - 375px) * 0.015), 33px); --text-body: clamp(12px, calc(14px + (var(--max-vw) - 375px) * 0.015), 29px); --text-body-alt: clamp(12px, calc(14px + (var(--max-vw) - 375px) * 0.015), 29px); --text-small: clamp(12px, calc(14px + (var(--max-vw) - 375px) * 0.015), 29px); --text-meta: clamp(12px, calc(14px + (var(--max-vw) - 375px) * 0.015), 29px); --text-micro: clamp(10px, calc(12px + (var(--max-vw) - 375px) * 0.015), 25px); --text-nav: clamp(14px, calc(16px + (var(--max-vw) - 375px) * 0.015), 33px); /* ---- per-layer text metrics — MOBILE values (brief 4.3 / 4.3b). line-height, letter-spacing and font-weight get NO clamp: they are already proportional or dimensionless. letter-spacing is always em (Figma % / 100). */ --lh-h1: 1.12; --ls-h1: -0.0182em; --fw-h2: 600; --lh-h2: 0.88; --ls-h2: -0.04em; --lh-stat-xl: 1.2; --ls-stat-xl: 0em; --lh-stat: 1.2; --ls-stat: -0.0556em; --lh-price: 1.2; --ls-price: -0.0625em; --lh-logo: 0.91; --ls-logo: -0.0364em; --lh-h3: 1.2; --ls-h3: -0.03em; --lh-h4: 0.95; --ls-h4: -0.03em; --lh-h5: 1.2; --ls-h5: -0.03em; --lh-label: 1; --ls-label: -0.08em; --lh-btn: normal; --ls-btn: -0.03em; /* normal, NOT 1: Figma AUTO leading — FD-175 */ --lh-body-lg: 1.15; --ls-body-lg: -0.05em; --lh-body: 1.15; --ls-body: -0.05em; --lh-body-alt: 1.2; --ls-body-alt: -0.03em; --lh-small: 1.2; --ls-small: -0.03em; --lh-meta: 0.88; --ls-meta: -0.04em; --lh-micro: 1; --ls-micro: 0em; --lh-nav: 1; --ls-nav: -0.02em; } /* ============================================================================ PSEUDO-TABLET 768-1023 — INTERPOLATED, nothing is drawn here. MANDATORY (brief 4.1a): a token defined in only two bands inherits the wrong one across the third. ragazzi-pdp2 shipped a badge 2x too large because 2 of 51 scoped tokens were missing from exactly this block. Text METRICS (lh/ls/weight) stay at their mobile values through this band — the desktop metrics belong to the drawn desktop layer and start at 1024. ============================================================================ */ @media (min-width: 768px) { :root { --gutter: clamp(20px, calc(20px + (var(--max-vw) - 768px) * 0.025), 40px); --section-gap: clamp(50px, calc(50px + (var(--max-vw) - 768px) * 0.025), 120px); --text-h1: clamp(55px, calc(55px + (var(--max-vw) - 768px) * 0.025), 120px); --text-h2: clamp(28px, calc(28px + (var(--max-vw) - 768px) * 0.025), 96px); --text-stat-xl: clamp(36px, calc(36px + (var(--max-vw) - 768px) * 0.025), 96px); --text-stat: clamp(36px, calc(36px + (var(--max-vw) - 768px) * 0.025), 48px); --text-price: clamp(32px, calc(32px + (var(--max-vw) - 768px) * 0.025), 42px); /* --text-logo: D-base 22 is SMALLER than M-base 22.06, so a ramp would invert. Held flat at the mobile value through the band; the 22px desktop value starts at 1024. */ --text-logo: 22.06px; --text-h3: clamp(18px, calc(18px + (var(--max-vw) - 768px) * 0.025), 26px); --text-h4: clamp(14px, calc(14px + (var(--max-vw) - 768px) * 0.025), 22px); --text-h5: clamp(16px, calc(16px + (var(--max-vw) - 768px) * 0.025), 20px); --text-label: clamp(16px, calc(16px + (var(--max-vw) - 768px) * 0.025), 20px); --text-btn: clamp(14px, calc(14px + (var(--max-vw) - 768px) * 0.025), 20px); --text-body-lg: clamp(16px, calc(16px + (var(--max-vw) - 768px) * 0.025), 20px); --text-body: clamp(14px, calc(14px + (var(--max-vw) - 768px) * 0.025), 16px); --text-body-alt: clamp(14px, calc(14px + (var(--max-vw) - 768px) * 0.025), 16px); --text-small: clamp(14px, calc(14px + (var(--max-vw) - 768px) * 0.025), 16px); --text-meta: clamp(14px, calc(14px + (var(--max-vw) - 768px) * 0.025), 16px); --text-micro: clamp(12px, calc(12px + (var(--max-vw) - 768px) * 0.025), 14px); --text-nav: clamp(16px, calc(16px + (var(--max-vw) - 768px) * 0.025), 18px); } } /* ============================================================================ DESKTOP 1024+ — drawn layer, proportional to --vw-base: 1520px, capped by --max-vw. Type shrinks at the 1024 seam (h2 96 -> 65, body 16 -> 11) because the desktop band scales LAYOUT AND TYPE TOGETHER by design. That is settled territory (project_band-seam-defect.md, FD-28 withdrawn): no stage raises type floors here. ============================================================================ */ @media (min-width: 1024px) { :root { --gutter: clamp(27px, calc(40px * (var(--max-vw) / var(--vw-base))), 51px); --section-gap: clamp(81px, calc(120px * (var(--max-vw) / var(--vw-base))), 152px); --c-heading: var(--c-ink-alt); /* #252627 on desktop — brief 4.3b-2 */ --text-h1: clamp(81px, calc(120px * (var(--max-vw) / var(--vw-base))), 152px); --text-h2: clamp(65px, calc(96px * (var(--max-vw) / var(--vw-base))), 121px); --text-stat-xl: clamp(65px, calc(96px * (var(--max-vw) / var(--vw-base))), 121px); --text-stat: clamp(32px, calc(48px * (var(--max-vw) / var(--vw-base))), 61px); --text-price: clamp(28px, calc(42px * (var(--max-vw) / var(--vw-base))), 53px); --text-logo: clamp(15px, calc(22px * (var(--max-vw) / var(--vw-base))), 28px); --text-h3: clamp(18px, calc(26px * (var(--max-vw) / var(--vw-base))), 33px); --text-h4: clamp(15px, calc(22px * (var(--max-vw) / var(--vw-base))), 28px); --text-h5: clamp(13px, calc(20px * (var(--max-vw) / var(--vw-base))), 25px); --text-label: clamp(13px, calc(20px * (var(--max-vw) / var(--vw-base))), 25px); --text-btn: clamp(13px, calc(20px * (var(--max-vw) / var(--vw-base))), 25px); --text-body-lg: clamp(13px, calc(20px * (var(--max-vw) / var(--vw-base))), 25px); --text-body: clamp(11px, calc(16px * (var(--max-vw) / var(--vw-base))), 20px); --text-body-alt: clamp(11px, calc(16px * (var(--max-vw) / var(--vw-base))), 20px); --text-small: clamp(11px, calc(16px * (var(--max-vw) / var(--vw-base))), 20px); --text-meta: clamp(11px, calc(16px * (var(--max-vw) / var(--vw-base))), 20px); --text-micro: clamp(9px, calc(14px * (var(--max-vw) / var(--vw-base))), 18px); --text-nav: clamp(12px, calc(18px * (var(--max-vw) / var(--vw-base))), 23px); /* Figma's AUTO leading for Onest at 20px is 26; Blink's `normal` computes 25, so every desktop CTA label box came out 1px short. FOUR builders measured this independently (hero 21/25/18 vs the drawn 20/26/18, pricing 57/55 vs the drawn 58/56, cases 39 vs 40, faq 35 vs 36) and two of them scoped the drawn ratio locally. Pinned ONCE here for the desktop band instead of five times: 20 x 1.3 = 26, exactly the drawn box. The MOBILE band keeps `normal` — there Blink already lands on Figma's drawn 18 for 14px. Driver fix at integration, 2026-08-12. */ --lh-btn: 1.3; /* per-layer metrics — DESKTOP values (brief 4.3). Only the rows that actually differ. */ --lh-h1: 1; --ls-h1: -0.05em; --fw-h2: 700; --lh-h2: 1; --ls-h2: -0.0625em; --ls-stat: -0.0417em; --ls-price: -0.0476em; --ls-label: -0.064em; } }