/* ============================================================================= Tradenet design tokens — single source of truth. Direction: "Dossier" (light canonical, dark twin) with the catalogue descent grafted in for the figures section. Colours are stored as space-separated RGB CHANNELS, not hex, so Tailwind's `` placeholder works: `rgb(var(--tn-ink) / )` then supports `text-ink/60` exactly like a built-in colour. Anything reading these directly in plain CSS must wrap them the same way: `rgb(var(--tn-ink))`. Every foreground/background pair below is measured, not estimated. The floor is WCAG AA: 4.5:1 for text, 3:1 for component boundaries and focus rings. The verification script lives in docs/ — rerun it after touching any value. ========================================================================== */ :root { /* --- brand ramp -------------------------------------------------------- Anchored on the existing CTA blue at step 600. That value is the brand and does not move; every other step is derived around it. */ --tn-blue-50: 239 244 255; /* #EFF4FF */ --tn-blue-100: 219 231 254; /* #DBE7FE */ --tn-blue-200: 190 211 253; /* #BED3FD */ --tn-blue-300: 146 181 251; /* #92B5FB */ --tn-blue-400: 94 147 247; /* #5E93F7 */ --tn-blue-500: 59 120 240; /* #3B78F0 */ --tn-blue-600: 37 99 235; /* #2563EB ← brand, fixed */ --tn-blue-700: 27 77 200; /* #1B4DC8 */ --tn-blue-800: 27 62 158; /* #1B3E9E */ --tn-blue-900: 28 55 126; /* #1C377E */ --tn-blue-950: 19 34 76; /* #13224C */ /* --- surfaces (light: the canonical theme) ----------------------------- Two surfaces only, with a visible step between them. The old palette alternated #ffffff against #f8fafc — 1.4% luminance apart, i.e. invisible. */ --tn-ground: 241 243 247; /* #F1F3F7 page ground */ --tn-surface: 255 255 255; /* #FFFFFF the sheet */ --tn-panel: 228 232 239; /* #E4E8EF the recess */ --tn-hairline: 199 207 220; /* #C7CFDC decorative rule — exempt from 3:1 */ --tn-border: 121 134 155; /* #79869B component boundary — 3.00:1 min */ /* --- text -------------------------------------------------------------- */ --tn-ink: 16 22 35; /* #101623 worst pair 14.72:1 */ --tn-ink-2: 55 68 89; /* #374459 worst pair 8.01:1 */ --tn-muted: 85 99 122; /* #55637A worst pair 4.95:1 */ /* --- links ------------------------------------------------------------- */ --tn-link: 27 77 200; /* blue-700, worst pair 5.81:1 */ --tn-link-hover: 27 62 158; /* blue-800 */ /* --- the single action ------------------------------------------------- These are FILLS, not text colours. They stay identical in both themes because a button carries its own surface. For coloured TEXT use --tn-link, which does follow the theme — using --tn-action as text fails AA on the dark ground. */ /* Every state goes DARKER, never lighter, so the white label always clears AA. The old rule lightened on hover in dark mode and fell to 4.09:1. */ --tn-action: 37 99 235; /* blue-600 · white label 5.17:1 */ --tn-action-hover: 27 77 200; /* blue-700 · white label 7.14:1 */ --tn-action-active: 27 62 158; /* blue-800 · white label 9.42:1 */ --tn-on-action: 255 255 255; /* --- focus ring, two layers ------------------------------------------- A single ring fails on a same-hue button (blue on blue = 1.72:1). The inner layer separates the button from the outer layer, so both edges clear 3:1 on any surface. Consumers: box-shadow 0 0 0 2px inner, 0 0 0 4px outer. */ --tn-focus-inner: 255 255 255; --tn-focus-outer: 27 77 200; /* --- semantic: state only, never decoration ---------------------------- */ --tn-ok: 14 120 71; /* #0E7847 worst pair 4.50:1 */ --tn-warn: 169 78 8; /* #A94E08 worst pair 4.52:1 — also "content missing" */ --tn-crit: 180 35 24; /* #B42318 worst pair 5.35:1 */ /* --- video veil -------------------------------------------------------- Light: the hero text sits on an opaque sheet, so the veil only has to make the sheet detach from the footage. It is not load-bearing for contrast. */ --tn-scrim: 8 12 20; --tn-scrim-alpha: 0.42; /* --- type -------------------------------------------------------------- */ --tn-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --tn-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Modular scale, ratio 1.200 from a 17px base. The top step (61px) is where the figures in the catalogue descent land. */ --tn-text-2xs: 12px; --tn-leading-2xs: 1.45; --tn-text-xs: 14px; --tn-leading-xs: 1.55; --tn-text-sm: 17px; --tn-leading-sm: 1.65; /* body */ --tn-text-md: 20px; --tn-leading-md: 1.50; /* lede */ --tn-text-lg: 24px; --tn-leading-lg: 1.30; /* h3 */ --tn-text-xl: 29px; --tn-leading-xl: 1.30; --tn-text-2xl: 35px; --tn-leading-2xl: 1.20; /* h2 · descent step 1 */ --tn-text-3xl: 42px; --tn-leading-3xl: 1.15; /* descent step 2 */ --tn-text-4xl: 51px; --tn-leading-4xl: 1.08; /* h1 · descent step 3 */ --tn-text-5xl: 61px; --tn-leading-5xl: 1.00; /* descent step 4 */ --tn-weight-regular: 400; --tn-weight-medium: 500; /* marginal apparatus, labels */ --tn-weight-semi: 600; /* subheads */ --tn-weight-bold: 700; /* titles, wordmark */ --tn-tracking-display: -0.022em; --tn-tracking-tight: -0.012em; --tn-tracking-normal: 0; --tn-tracking-label: 0.10em; --tn-measure: 68ch; /* running prose */ --tn-measure-narrow: 42ch; /* card copy */ --tn-measure-rail: 34ch; /* the marginal apparatus */ /* --- spacing, 4px base -------------------------------------------------- */ --tn-space-2xs: 4px; --tn-space-xs: 8px; --tn-space-sm: 12px; --tn-space-md: 16px; --tn-space-lg: 24px; --tn-space-xl: 32px; --tn-space-2xl: 48px; --tn-space-3xl: 64px; --tn-space-4xl: 96px; --tn-space-5xl: 144px; --tn-section-y: var(--tn-space-4xl); /* vertical rhythm between sections */ /* --- container and gutters --------------------------------------------- ONE container for navbar, sections and footer. The current page runs two — Tailwind's `container` (which snaps to breakpoints) in the navbar and footer, `max-w-7xl` in the sections — which is why the wordmark jumps 78px left when the viewport grows from 1000 to 1100px. */ --tn-container: 1160px; --tn-gutter: 20px; /* --- radius ------------------------------------------------------------- */ --tn-radius-sm: 3px; --tn-radius-md: 6px; --tn-radius-full: 9999px; /* --- elevation ---------------------------------------------------------- Two shadows, no more. Paper casts a shadow; that is the whole logic. */ --tn-shadow-sheet: 0 2px 4px rgb(11 18 32 / .10), 0 24px 60px -24px rgb(11 18 32 / .55); --tn-shadow-overlay: 0 4px 8px rgb(11 18 32 / .08), 0 32px 64px -20px rgb(11 18 32 / .35); /* --- motion ------------------------------------------------------------- Three durations, two curves. Nothing longer than 320ms, no spring, no bounce. */ --tn-dur-state: 120ms; /* hover, active, colour changes */ --tn-dur-enter: 200ms; /* menus, disclosure */ --tn-dur-reveal: 320ms; /* scroll entrance */ --tn-dur-count: 1200ms; /* the one long duration: a figure counting up */ --tn-stagger: 60ms; /* max 3 items, then no further delay */ --tn-marquee: 140s; /* one full pass of the partner wall */ --tn-marquee-slow: 0.22; /* playback rate while hovered or focused */ --tn-ease-out: cubic-bezier(.2, 0, 0, 1); --tn-ease-inout: cubic-bezier(.4, 0, .6, 1); /* --- z-index ------------------------------------------------------------ */ --tn-z-base: 0; --tn-z-sticky: 10; --tn-z-dropdown: 20; --tn-z-backdrop: 30; --tn-z-modal: 40; --tn-z-toast: 50; --tn-z-skiplink: 60; } /* --- gutter steps --------------------------------------------------------- Breakpoints stay on Tailwind's defaults (640 / 768 / 1024 / 1280 / 1536) so nothing already written has to be rewritten. Only the gutter is new. */ @media (min-width: 640px) { :root { --tn-gutter: 32px; } } @media (min-width: 1024px) { :root { --tn-gutter: 48px; --tn-section-y: var(--tn-space-5xl); } } @media (min-width: 1440px) { :root { --tn-gutter: 64px; } } /* --- dark twin ------------------------------------------------------------ Designed, not inverted. Note the recess goes DARKER than the sheet (#0C1017 under #1A202A): in light the panel is a dent in paper, in dark it is an opening in the dark. Inverting mechanically would make the recess look raised. */ .dark { --tn-ground: 18 22 30; /* #12161E */ --tn-surface: 26 32 42; /* #1A202A */ --tn-panel: 12 16 23; /* #0C1017 */ --tn-hairline: 43 51 64; /* #2B3340 */ --tn-border: 95 107 125; /* #5F6B7D 3.03:1 min */ --tn-ink: 236 239 244; /* #ECEFF4 worst pair 14.19:1 */ --tn-ink-2: 182 191 205; /* #B6BFCD worst pair 8.82:1 */ --tn-muted: 129 142 159; /* #818E9F worst pair 4.91:1 */ --tn-link: 94 147 247; /* blue-400 — blue-600 only reaches 3.50:1 here */ --tn-link-hover:146 181 251; /* blue-300 */ /* The action keeps the same fill in both themes: it is its own surface. */ --tn-focus-inner: 18 22 30; --tn-focus-outer:236 239 244; --tn-ok: 74 222 128; /* #4ADE80 worst pair 9.39:1 */ --tn-warn: 240 163 44; /* #F0A32C worst pair 7.77:1 */ --tn-crit: 255 139 128; /* #FF8B80 worst pair 7.21:1 */ --tn-scrim-alpha: 0.55; --tn-shadow-sheet: 0 2px 4px rgb(0 0 0 / .55), 0 24px 60px -24px rgb(0 0 0 / .80); --tn-shadow-overlay: 0 4px 8px rgb(0 0 0 / .45), 0 32px 64px -20px rgb(0 0 0 / .70); } /* --- the one container ---------------------------------------------------- */ .tn-container { width: 100%; max-width: calc(var(--tn-container) + 2 * var(--tn-gutter)); margin-inline: auto; padding-inline: var(--tn-gutter); } /* --- the one focus ring --------------------------------------------------- Applied through :focus-visible so a mouse click never paints it. */ .tn-focus:focus-visible, :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: none; /* No border-radius here on purpose: the ring must follow whatever radius the element already has, not impose one the moment it takes focus. */ box-shadow: 0 0 0 2px rgb(var(--tn-focus-inner)), 0 0 0 4px rgb(var(--tn-focus-outer)); } /* --- reduced motion, once, for every consumer ----------------------------- Consumers read the duration tokens, so neutralising them here disables motion everywhere without each component having to remember. */ @media (prefers-reduced-motion: reduce) { :root { --tn-dur-state: 0.01ms; --tn-dur-enter: 0.01ms; --tn-dur-reveal: 0.01ms; --tn-dur-count: 0.01ms; --tn-stagger: 0.01ms; } }