/* ========================================================================== Highline Payments 2.0 — design tokens The measurable half of the design system: type scale, spacing rhythm, motion, layering and measure. Loaded FIRST, before base/layout/components/blocks. Division of responsibility, and it matters: ThemeService -> everything an administrator can change (colour, radius, shadow, container width, fonts). Emitted as a :root block in BEFORE this file, so anything here may safely reference those tokens. tokens.css -> the structural scale an administrator must NOT be able to break — the ratios that keep the site looking composed. So: no literal colours in this file. Sizes, ratios and durations only. ========================================================================== */ :root { /* --- Type families ------------------------------------------------------ ThemeService overrides these when the admin sets a font. The stack is the fallback, and it is a real choice rather than a default: system UI faces render immediately with no webfont round trip and no layout shift, which §7 ("no CLS") and §41 ("still fast") both require. */ --hl-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --hl-font-heading: var(--hl-font-body); --hl-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* --- Type scale -------------------------------------------------------- Fluid between a 360px phone and a 1920px desktop. Every step is clamped so nothing degrades into unreadably small text on a phone (§24: "deliberate mobile line wrapping rather than tiny text") and nothing runs away on a wide monitor. The vw coefficients are chosen so 1rem = 16px is the narrow anchor. Every step up is ~1.25x the one below; every step down is ~0.8x. */ --hl-size-3xs: clamp(0.6875rem, 0.65rem + 0.2vw, 0.75rem); /* 11–12px */ --hl-size-2xs: clamp(0.75rem, 0.7rem + 0.3vw, 0.875rem); /* 12–14px */ --hl-size-xs: clamp(0.8125rem, 0.75rem + 0.35vw, 0.9375rem); /* 13–15px */ --hl-size-sm: clamp(0.875rem, 0.8rem + 0.4vw, 1rem); /* 14–16px */ --hl-size-body: clamp(0.9375rem, 0.85rem + 0.5vw, 1.0625rem); /* 15–17px */ --hl-size-body-sm: clamp(0.875rem, 0.8rem + 0.4vw, 1rem); /* 14–16px */ --hl-size-lg: clamp(1rem, 0.9rem + 0.55vw, 1.125rem); /* 16–18px */ --hl-size-xl: clamp(1.125rem, 1rem + 0.6vw, 1.25rem); /* 18–20px */ --hl-size-2xl: clamp(1.375rem, 1.2rem + 0.75vw, 1.625rem); /* 22–26px */ --hl-size-3xl: clamp(1.75rem, 1.5rem + 1vw, 2.125rem); /* 28–34px */ --hl-size-4xl: clamp(2.25rem, 1.8rem + 1.5vw, 3rem); /* 36–48px */ --hl-size-5xl: clamp(3rem, 2.25rem + 2vw, 4rem); /* 48–64px */ --hl-size-6xl: clamp(4rem, 3rem + 2.5vw, 5.5rem); /* 64–88px */ /* Display / heading roles map to the scale above. */ --hl-size-display: var(--hl-size-6xl); --hl-size-h1: var(--hl-size-5xl); --hl-size-h2: var(--hl-size-4xl); --hl-size-h3: var(--hl-size-3xl); --hl-size-h4: var(--hl-size-2xl); --hl-size-eyebrow: var(--hl-size-xs); --hl-size-lead: var(--hl-size-lg); --hl-size-small: var(--hl-size-sm); --hl-size-legal: var(--hl-size-3xs); /* --- Leading ------------------------------------------------------------ */ --hl-leading-tight: 1.08; --hl-leading-display: 1.04; --hl-leading-heading: 1.12; --hl-leading-body: 1.65; --hl-leading-relaxed: 1.75; /* --- Tracking ----------------------------------------------------------- */ --hl-tracking-display: -0.025em; --hl-tracking-heading: -0.015em; --hl-tracking-body: 0; --hl-tracking-eyebrow: 0.16em; --hl-tracking-tight: -0.02em; /* --- Weights ------------------------------------------------------------ */ --hl-weight-regular: 400; --hl-weight-medium: 500; --hl-weight-semibold: 600; --hl-weight-bold: 700; /* --- Measure ------------------------------------------------------------ Maximum readable width for each role. Prevents the 1920px lines nobody finishes. */ --hl-measure-display: 18ch; --hl-measure-heading: 28ch; --hl-measure-body: 68ch; --hl-measure-narrow: 42ch; /* THE EDITORIAL MEASURE, IN PIXELS AND DELIBERATELY NOT IN `ch`. `ch` is the width of the digit zero, and in this typeface that is 9.79px at body size while the AVERAGE character is 7.05px. So a measure written as `78ch` renders at 108 characters, not 78 — every ch-based measure here is about 39% wider than the number in it suggests. At lede size that error is harmless: `62ch` lands at 78-85 characters, which is where a lede should be. At body size it is not: the product overview's `78ch` was 108 characters a line. This one is stated as the rendered width that produces ~85 characters of body copy, so it means what it says. */ --hl-measure-editorial: 37.5rem; /* 600px ≈ 85 characters at body size */ /* THE FINE-PRINT MEASURE, IN `em` AND FOR A REASON. Notes, disclaimers and diagram captions are set in three different sizes across the system — 11.12px, 12.8px and 14px. A measure in px or rem would give each of them a different line length; `ch` would be wrong for all three, in the same 39% direction. `em` is relative to the element's OWN font-size, so one value produces the same ~86 characters whatever size the fine print is set at. 0.454em is this typeface's average character advance, so 39em ≈ 86. */ --hl-measure-note: 39em; /* --- Spacing rhythm ---------------------------------------------------- A single scale, roughly 1.5x, used for everything. Component padding and section padding drawing from the same set is what makes unrelated blocks look like one site. */ --hl-space-3xs: 0.25rem; --hl-space-2xs: 0.5rem; --hl-space-xs: 0.75rem; --hl-space-sm: 1rem; --hl-space-md: 1.5rem; --hl-space-lg: 2rem; --hl-space-xl: 3rem; --hl-space-2xl: 4rem; --hl-space-3xl: 6rem; --hl-space-4xl: 8rem; /* Section rhythm is fluid: the same block needs less air on a phone than in a 1920px viewport, and hard-coding the desktop value is most of why the current design reads as cramped on mobile and thin on desktop. */ --hl-section-y-compact: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem); --hl-section-y: clamp(3.5rem, 2rem + 4.5vw, 6.5rem); --hl-section-y-roomy: clamp(4.5rem, 2.25rem + 6.5vw, 9rem); /* Gutters grow with the viewport so content never touches the screen edge on a phone (§25: "generous padding") and never hugs it on a desktop. */ --hl-gutter: clamp(1.25rem, 0.75rem + 2vw, 2.5rem); /* --- Layering ---------------------------------------------------------- */ --hl-z-behind: -1; --hl-z-base: 1; --hl-z-raised: 10; --hl-z-sticky: 100; --hl-z-header: 200; --hl-z-dropdown: 300; --hl-z-drawer: 400; --hl-z-modal: 500; --hl-z-loader: 900; --hl-z-skip: 1000; /* --- Motion ------------------------------------------------------------ Four durations and four curves, no more. A shared vocabulary is what makes independent components feel like one system (§29: a SMALL reusable motion vocabulary). */ --hl-duration-instant: 90ms; --hl-duration-fast: 180ms; --hl-duration-base: 300ms; --hl-duration-slow: 560ms; --hl-duration-reveal: 760ms; /* Decelerating. Default for anything entering or responding to a pointer. */ --hl-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* Softer and longer-tailed — for large elements where ease-out looks abrupt. */ --hl-ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1); --hl-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* A restrained overshoot. Small UI accents only — never layout. */ --hl-ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1); /* The interaction transition every control shares. */ --hl-transition: color var(--hl-duration-fast) var(--hl-ease-out), background-color var(--hl-duration-fast) var(--hl-ease-out), border-color var(--hl-duration-fast) var(--hl-ease-out), box-shadow var(--hl-duration-base) var(--hl-ease-out), transform var(--hl-duration-base) var(--hl-ease-out), opacity var(--hl-duration-fast) var(--hl-ease-out); /* --- Layout ------------------------------------------------------------ */ /* 45rem, not 52rem. At 52rem the legal set's prose measured 100 characters a line — the longest running text on the site, on the four pages a reader is most likely to be scanning for one clause. 45rem puts it at ~85, which is the top of the comfortable range and matches the editorial measure the product overview now uses. Reaches the legal pages and nothing else. */ --hl-container-narrow: 45rem; --hl-container-wide: 95rem; --hl-header-height: 4.5rem; --hl-border-hairline: 1px; /* --- Network visual ---------------------------------------------------- The chrome AROUND the canvas (its stage, mask and glow). The canvas draws itself from window.HL.theme — see modules/network.js. */ --hl-network-mask-fade: 12%; --hl-network-stage-inset: clamp(1rem, 3vw, 3rem); } @media (min-width: 62rem) { :root { --hl-header-height: 5.25rem; } } /* A phone is not a narrow desktop (§25). Large type is pulled back a step so headlines wrap deliberately across 2-3 lines instead of 6, and the section rhythm tightens so a scroll reaches real content rather than empty space. */ @media (max-width: 30rem) { :root { --hl-tracking-display: -0.03em; --hl-leading-display: 1.02; --hl-leading-tight: 1.1; --hl-measure-display: 16ch; --hl-measure-heading: 22ch; } } /* Honour the OS setting at the source: durations collapse here, so a component that simply uses the tokens is automatically reduced-motion-correct and does not need its own media query. */ @media (prefers-reduced-motion: reduce) { :root { --hl-duration-instant: 1ms; --hl-duration-fast: 1ms; --hl-duration-base: 1ms; --hl-duration-slow: 1ms; --hl-duration-reveal: 1ms; } }