/* ============================================================ Transition Logic — design tokens Everything between silicon and system, and nothing outside it. Dark set is the default (web). Light set is for print and corporate documents: apply [data-theme="light"] on , or let the print media query below do it. Contrast ratios are measured (WCAG 2.1 relative luminance). ============================================================ */ :root { /* --- Dark ground (web default) ------------------------------------ */ --tl-ground: #121212; /* never pure black */ --tl-surface: #1C1C1C; /* 1.10:1 vs ground */ --tl-raised: #242424; /* 1.21:1 vs ground */ --tl-hairline: #2E2E2E; /* 1.38:1 vs ground — rules only */ --tl-hairline-strong: #3A3A3A; /* focus outlines, table heads */ --tl-text: #E8E6E1; /* 15.0:1 on ground · 13.7:1 surface */ --tl-text-secondary: #A0A09B; /* 7.1:1 on ground · 6.5:1 surface */ --tl-text-disabled: #6B6B67; /* 3.4:1 on ground — non-text only */ --tl-accent: #14B8A6; /* Phosphor Teal · 7.5:1 on ground */ --tl-accent-hover: #2DD4BF; /* 10.0:1 on ground — hover only */ --tl-accent-quiet: #0D6E63; /* fills/borders behind text, never text */ --tl-notice: #F59E0B; /* Amber · 8.7:1 · dated notices only */ --tl-focus: #2DD4BF; --tl-focus-width: 2px; --tl-focus-offset: 2px; --tl-selection-bg: #14B8A6; --tl-selection-text: #121212; /* --- Type families -------------------------------------------------- */ --tl-font-sans: "Poppins", "Helvetica Neue", Arial, sans-serif; --tl-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; /* Only two weights exist. Do not add 300 or 700. No italics. */ --tl-weight-regular: 400; --tl-weight-semibold: 600; /* --- Type scale · web (px) ------------------------------------------ */ --tl-size-display: 48px; --tl-lh-display: 1.15; --tl-size-h1: 36px; --tl-lh-h1: 1.20; --tl-size-h2: 28px; --tl-lh-h2: 1.25; --tl-size-h3: 22px; --tl-lh-h3: 1.35; --tl-size-h4: 19px; --tl-lh-h4: 1.40; --tl-size-body-lg: 19px; --tl-lh-body-lg: 1.65; --tl-size-body: 18px; --tl-lh-body: 1.65; --tl-size-small: 16px; --tl-lh-small: 1.55; --tl-size-caption: 14px; --tl-lh-caption: 1.50; --tl-size-label: 12px; --tl-lh-label: 1.20; --tl-size-mono: 16px; --tl-lh-mono: 1.60; --tl-size-mono-sm: 14px; --tl-lh-mono-sm: 1.55; --tl-tracking-label: 0.08em; /* ALL CAPS labels only */ --tl-tracking-tight: -0.01em; /* display + h1 only */ --tl-measure: 68ch; /* 65–75 characters */ /* --- Spacing scale (4px base) --------------------------------------- */ --tl-space-1: 4px; --tl-space-2: 8px; --tl-space-3: 12px; --tl-space-4: 16px; --tl-space-5: 24px; --tl-space-6: 32px; --tl-space-7: 48px; --tl-space-8: 64px; --tl-space-9: 96px; --tl-space-10:128px; /* --- Geometry ------------------------------------------------------- */ --tl-radius-0: 0px; /* tables, code blocks, images */ --tl-radius-1: 2px; /* buttons, fields, tags */ --tl-radius-2: 4px; /* cards */ --tl-border: 1px; --tl-rule: 1px solid var(--tl-hairline); --tl-container: 1120px; --tl-container-prose: 720px; /* --- Motion (the entire budget) ------------------------------------- */ --tl-motion-duration: 120ms; --tl-motion-easing: linear; --tl-motion-property: color, border-color, background-color; /* Nothing else moves. No transform, no opacity fades, no scroll effects. */ } /* ============================================================ Light / print set — corporate documents, PDFs, letterheads ============================================================ */ [data-theme="light"] { --tl-ground: #FFFFFF; --tl-surface: #F7F8F9; --tl-raised: #FFFFFF; --tl-hairline: #E5E7EB; /* Mist */ --tl-hairline-strong: #C9CDD4; --tl-text: #111827; /* Ink · 17.7:1 on white · 14.3:1 on Mist */ --tl-text-secondary: #4B5563; /* Graphite · 7.6:1 on white */ --tl-text-disabled: #9AA1AC; /* 2.6:1 — non-text only */ --tl-accent: #115E59; /* Deep Teal · 7.4:1 on white — body-size teal text */ --tl-accent-hover: #0F766E; /* Circuit Teal · 5.5:1 on white — links, large text */ --tl-accent-quiet: #0F766E; --tl-notice: #92400E; /* 8.0:1 on white — dated notices only */ --tl-focus: #0F766E; --tl-selection-bg: #0F766E; --tl-selection-text: #FFFFFF; } /* --- Print type scale (pt) --------------------------------------------- */ @media print { :root { --tl-ground: #FFFFFF; --tl-surface: #F7F8F9; --tl-raised: #FFFFFF; --tl-hairline: #E5E7EB; --tl-hairline-strong: #C9CDD4; --tl-text: #111827; --tl-text-secondary: #4B5563; --tl-text-disabled: #9AA1AC; --tl-accent: #115E59; --tl-accent-hover: #0F766E; --tl-accent-quiet: #0F766E; --tl-notice: #92400E; --tl-size-display: 30pt; --tl-lh-display: 1.15; --tl-size-h1: 22pt; --tl-lh-h1: 1.20; --tl-size-h2: 16pt; --tl-lh-h2: 1.25; --tl-size-h3: 13pt; --tl-lh-h3: 1.35; --tl-size-h4: 11.5pt;--tl-lh-h4: 1.40; --tl-size-body-lg: 11.5pt;--tl-lh-body-lg: 1.55; --tl-size-body: 10.5pt;--tl-lh-body: 1.55; --tl-size-small: 9.5pt; --tl-lh-small: 1.45; --tl-size-caption: 8.5pt; --tl-lh-caption: 1.40; --tl-size-label: 7.5pt; --tl-lh-label: 1.20; --tl-size-mono: 9.5pt; --tl-lh-mono: 1.50; --tl-size-mono-sm: 8.5pt; --tl-lh-mono-sm: 1.45; } } /* ============================================================ Reference values kept out of the theme switch (fixed brand colours — use only where a literal is required) ============================================================ */ :root { --tl-brand-phosphor-teal: #14B8A6; --tl-brand-circuit-teal: #0F766E; /* 3.4:1 on #121212 — NEVER text on dark */ --tl-brand-deep-teal: #115E59; --tl-brand-ink: #111827; --tl-brand-graphite: #4B5563; --tl-brand-mist: #E5E7EB; --tl-brand-amber: #F59E0B; }