/* teza lab tokens — generated from design-system/tokens.json. Light (Vermilion) is the bare :root; dark (Vermilion dark) follows the viewer and can be forced with data-theme on . */ :root { /* color */ --surface: #faf9f6; --surface-sunken: #f1efe9; --surface-raised: #ffffff; --ink: #171715; --ink-muted: #5e5c56; --line: #e2dfd8; --line-strong: #8a877f; --accent: #bf3a1d; --on-accent: #ffffff; --danger: #b42318; --success: #1a6b3e; /* spacing — 4px base */ --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; --space-10: 128px; /* radius */ --radius-sm: 4px; --radius-md: 8px; --radius-full: 999px; /* layout */ --container: 1120px; --container-narrow: 720px; --measure: 36em; --gutter: 24px; /* type */ --font-sans: "Hanken Grotesk", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --surface: #131311; --surface-sunken: #1c1b19; --surface-raised: #1e1d1a; --ink: #f1efe9; --ink-muted: #a8a59c; --line: #33322e; --line-strong: #7d7a72; --accent: #ef6a4c; --on-accent: #131311; --danger: #ff8b7e; --success: #6fd19a; color-scheme: dark; } } :root[data-theme="dark"] { --surface: #131311; --surface-sunken: #1c1b19; --surface-raised: #1e1d1a; --ink: #f1efe9; --ink-muted: #a8a59c; --line: #33322e; --line-strong: #7d7a72; --accent: #ef6a4c; --on-accent: #131311; --danger: #ff8b7e; --success: #6fd19a; color-scheme: dark; } /* type styles. Headings track tight in Latin; bundle.css resets :lang(ja) to 0. */ .display-xl { font-family: var(--font-sans); font-size: 72px; line-height: 78px; font-weight: 500; letter-spacing: -0.035em; } .display-l { font-family: var(--font-sans); font-size: 56px; line-height: 62px; font-weight: 500; letter-spacing: -0.03em; } .heading-1 { font-family: var(--font-sans); font-size: 40px; line-height: 48px; font-weight: 500; letter-spacing: -0.025em; } .heading-2 { font-family: var(--font-sans); font-size: 28px; line-height: 36px; font-weight: 500; letter-spacing: -0.02em; } .heading-3 { font-family: var(--font-sans); font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -0.01em; } .body-l { font-family: var(--font-sans); font-size: 20px; line-height: 32px; font-weight: 400; } .body-m { font-family: var(--font-sans); font-size: 16px; line-height: 28px; font-weight: 400; } .body-s { font-family: var(--font-sans); font-size: 14px; line-height: 24px; font-weight: 400; } .eyebrow { font-family: var(--font-sans); font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: 0.08em; } .label { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; } .caption { font-family: var(--font-sans); font-size: 12px; line-height: 18px; font-weight: 400; }