/* Unibit Typography — text-style tokens, per-font. Font axis: data-font on . Default = Open Sans (:root); Bit Sans = [data-font="bit"]. Values transcribed verbatim from the DS exports (Open Sans = px line-heights, Bit Sans = % line-heights). Source of truth: Unibit Design System (Figma text styles). File ini SEKALIGUS MEMUAT kedua fontnya (2026-09-07). Sebelumnya dia cuma menyebut nama family, sedangkan filenya dimuat lewat dua terpisah per halaman. Halaman yang lupa salah satu link merender font yang salah tanpa error sedikit pun — sudah kejadian di tokens-guide.html. Sekarang cukup: Path woff relatif terhadap FILE INI, bukan terhadap halaman, jadi halaman di subfolder yang me-link ../typography.css tetap dapat fontnya. fonts/bitsans.css dibiarkan ada demi 86 halaman yang sudah me-link-nya; @font-face ganda dengan src identik tidak berbahaya. */ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap'); @font-face { font-family: 'Bit Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/BitSans-Regular.woff2') format('woff2'), url('fonts/BitSans-Regular.woff') format('woff'); } @font-face { font-family: 'Bit Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/BitSans-Bold.woff2') format('woff2'), url('fonts/BitSans-Bold.woff') format('woff'); } /* ── Open Sans (default) ── */ :root, [data-font="open"] { --font-family: 'Open Sans', sans-serif; --text-billboard: 700 24px/30px var(--font-family); --text-display-1: 700 34px/48px var(--font-family); --text-display-2: 700 20px/25px var(--font-family); --text-display-3: 700 16px/20px var(--font-family); --text-title-1: 700 24px/30px var(--font-family); --text-title-2: 700 20px/25px var(--font-family); --text-title-3: 700 16px/20px var(--font-family); --text-heading-1: 700 16px/22px var(--font-family); --text-heading-2: 700 13px/18px var(--font-family); --text-body-1b: 700 15px/21px var(--font-family); --text-body-2b: 700 14px/20px var(--font-family); --text-body-3b: 700 13px/18px var(--font-family); --text-body-4b: 700 12px/17px var(--font-family); --text-body-5b: 700 11px/15px var(--font-family); --text-body-1r: 400 15px/21px var(--font-family); --text-body-2r: 400 14px/20px var(--font-family); --text-body-3r: 400 13px/18px var(--font-family); --text-body-4r: 400 12px/17px var(--font-family); --text-body-5r: 400 11px/15px var(--font-family); --text-paragraph-1: 400 15px/22px var(--font-family); --text-paragraph-2: 400 14px/20px var(--font-family); --text-paragraph-3: 400 13px/19px var(--font-family); --text-table-1b: 700 14px/20px var(--font-family); --text-table-2b: 700 13px/18px var(--font-family); --text-table-3b: 700 12px/17px var(--font-family); --text-table-1r: 400 14px/20px var(--font-family); --text-table-2r: 400 13px/18px var(--font-family); --text-table-3r: 400 12px/17px var(--font-family); --text-label-sb: 600 11px/16px var(--font-family); --text-micro: 400 11px/16px var(--font-family); } /* ── Bit Sans (brand) ── */ [data-font="bit"] { --font-family: 'Bit Sans', system-ui, sans-serif; --text-billboard: 700 32px/125% var(--font-family); --text-display-1: 700 34px/125% var(--font-family); --text-display-2: 700 24px/135% var(--font-family); --text-display-3: 700 20px/135% var(--font-family); --text-title-1: 700 24px/135% var(--font-family); --text-title-2: 700 20px/135% var(--font-family); --text-title-3: 700 16px/135% var(--font-family); --text-heading-1: 700 18px/135% var(--font-family); --text-heading-2: 700 16px/135% var(--font-family); --text-body-1b: 700 16px/135% var(--font-family); --text-body-2b: 700 15px/135% var(--font-family); --text-body-3b: 700 14px/135% var(--font-family); --text-body-4b: 700 13px/135% var(--font-family); --text-body-5b: 700 12px/135% var(--font-family); --text-body-1r: 400 16px/135% var(--font-family); --text-body-2r: 400 15px/135% var(--font-family); --text-body-3r: 400 14px/135% var(--font-family); --text-body-4r: 400 13px/135% var(--font-family); --text-body-5r: 400 12px/135% var(--font-family); --text-paragraph-1: 400 16px/145% var(--font-family); --text-paragraph-2: 400 15px/145% var(--font-family); /* 14, bukan 13 — seluruh tangga Body dan Paragraph pakai pola Bit = Open + 1. P1 (16/15) dan P2 (15/14) patuh; P3 dulu 13/13 dan melanggar pola. Dibetulkan 2026-08-17. Efeknya Bit kehilangan prosa 13px, dan Bit sekarang PUNYA prosa 14px. */ --text-paragraph-3: 400 14px/145% var(--font-family); --text-table-1b: 700 14px/135% var(--font-family); --text-table-2b: 700 13px/135% var(--font-family); --text-table-3b: 700 12px/135% var(--font-family); --text-table-1r: 400 14px/135% var(--font-family); --text-table-2r: 400 13px/135% var(--font-family); --text-table-3r: 400 12px/135% var(--font-family); --text-micro: 400 11px/135% var(--font-family); /* Bit Sans tidak punya weight 600 — family-nya cuma Regular (400) dan Bold (700), dan library Figma "Typography - Bit Sans" juga tidak punya style Label SB. Tanpa baris di bawah, token ini TIDAK jadi Bit Sans: custom property mewarisi nilai yang SUDAH disubstitusi. Karena --text-label-sb cuma dideklarasikan di blok :root/open, di sana var(--font-family) sudah terlanjur dibakar jadi 'Open Sans'. Element data-font="bit" tidak mendeklarasikan ulang token ini, jadi dia mewarisi nilai jadi itu — teksnya render Open Sans 600. (Beda dengan --text-micro dkk yang memang dideklarasikan ulang di blok ini.) Deklarasi eksplisit di bawah bikin Bit pakai huruf brand-nya sendiri di 700. CATATAN: ini mengubah tampilan — halaman data-font="bit" yang sebelumnya render Open Sans 600 sekarang jadi Bit Sans 700. */ --text-label-sb: 700 11px/16px var(--font-family); }