@charset "utf-8"; /* ============================================================================ TORQUE DESIGN SYSTEM 01 · TOKENS — one file, two themes ---------------------------------------------------------------------------- Thesis — ROAD AND SIGNAL A road is a quiet, neutral ground. The only colour on it is the signal: the thing you are meant to act on, painted in one high-visibility colour. Torque works the same way: · the ground is neutral — paper on the public site, steel graphite in the dash; nothing decorative is ever coloured; · ONE signal colour, the shop's own brand. It marks what you act on — the primary action, the selection, the focus — and nothing else; · status colours carry status only, and never look like the signal. Built to be sold to many shops Every signal value below derives from ONE colour, --tq-brand (GoodWay: its signal orange, #E75235). A second shop is a second set of the "1 · SIGNAL" block and a different logo — no component changes. The class prefix (tq-) is the product's, not the shop's, for the same reason. Two themes :root LIGHT — paper + graphite chrome. The public site. .tq-dark DARK — steel graphite. The dash puts it on ; the public site puts it on one graphite band (the header, the footer, a dark section) and everything inside that band turns dark with it. .tq-paper PAPER again — an island of the light roles inside a dark band (a price tag on the hero photo). Components read the ROLES in section 4 (--tq-bg, --tq-text-body …), never a raw ramp step, so a component drawn for one theme is right in the other. The dash kit is the exception by design: it is dark-only and reads the steel ramp directly, like the kit it was ported from. Every text pairing here was measured (WCAG 2.x relative luminance). The ratio sits in the comment beside the value, against the surface it lands on. Colours are authored in OKLCH and shipped as hex. ========================================================================= */ :root { /* ── 1 · SIGNAL — the shop's brand, and the only accent ────────────────── GoodWay's signal orange, oklch(.637 .190 33) = #E75235. The ramp keeps that hue through the deep steps and drifts warmer as it lightens, so a pale step still reads ORANGE rather than salmon. */ --tq-brand-50: #FEF6F1; /* oklch(.978 .016 48) washes */ --tq-brand-100: #FEEAE1; /* oklch(.952 .036 46) selected row, soft pill */ --tq-brand-200: #FFD5C4; /* oklch(.905 .072 44) */ --tq-brand-300: #FFB99F; /* oklch(.845 .115 42) */ --tq-brand-400: #FF966D; /* oklch(.775 .155 42) */ --tq-brand-500: #E75235; /* oklch(.637 .190 33) ▸ THE BRAND — graphics, icons, big type. 3.71:1 on white: a UI shape, never small text on white */ --tq-brand-600: #D33E21; /* oklch(.580 .190 33) ▸ FILL — carries white at 4.69:1 */ --tq-brand-650: #CA3517; /* oklch(.555 .190 33) its hover — 5.21:1 */ --tq-brand-700: #B83217; /* oklch(.520 .175 33) ▸ TEXT on paper — 5.99 white · 5.58 bg · 5.25 sunken */ --tq-brand-750: #C12B09; /* oklch(.530 .190 33) pressed fill — 5.81:1 */ --tq-brand-800: #952614; /* oklch(.445 .150 32) */ --tq-brand-900: #702015; /* oklch(.370 .115 31) */ --tq-brand-950: #49150F; /* oklch(.280 .080 30) */ --tq-brand: var(--tq-brand-500); --tq-brand-rgb: 231 82 53; /* the brand AS TEXT on steel (dash): oklch(.76 .16 46) — warmer again, so it reads orange on a dark ground. 7.58 on steel-200, 6.39 on 300 */ --tq-brand-glow: #FF8F57; --tq-brand-glow-rgb: 255 143 87; /* ── 2 · STEEL — the dark neutral ramp ───────────────────────────────── Apple's system greys, carried to a whisper of the logo's own ink hue (oklch h 258, chroma ≤ .006): graphite, not navy. Luminance is within one 8-bit step of the originals, so every contrast they were proven at still holds. */ --tq-white-rgb: 255 255 255; --tq-black-rgb: 0 0 0; --tq-steel-rgb: 11 13 17; /* shadow tint for the light theme */ --tq-ink-000: #000000; /* void — scrims only */ --tq-ink-025: #000000; --tq-ink-050: #040507; /* ▸ dash CANVAS */ --tq-ink-100: #0C0E11; /* sunken */ --tq-ink-150: #131518; /* panel */ --tq-ink-200: #1B1C1F; /* raised */ --tq-ink-300: #282A2D; /* popover, hairline hi */ --tq-ink-400: #393A3D; /* border strong */ --tq-ink-500: #47484B; /* disabled ink */ --tq-ink-600: #626366; /* ▸ NOT A TEXT COLOUR */ --tq-ink-650: #97999B; /* lowest text step — 5.03:1 on 300, 5.96 on 200 */ --tq-ink-700: #A0A2A4; /* muted — 5.62 on 300 */ --tq-ink-800: #D1D3D5; /* body — 11.35 on 200 */ --tq-ink-900: #E7E9EB; /* strong — 14.00 on 200 */ --tq-ink-950: #F4F5F8; /* ▸ headline. never #FFF */ /* ── 3 · PAPER — the light neutral ramp (the public site) ────────────── Same hue as the steel, so paper and graphite are one family. */ --tq-paper-0: #FFFFFF; /* cards, fields */ --tq-paper-50: #FBFCFD; /* raised on bg */ --tq-paper-100: #F5F7F9; /* ▸ page ground */ --tq-paper-200: #EEF0F3; /* sunken, wells, table heads */ --tq-paper-300: #E3E6EA; /* hover on sunken */ --tq-paper-400: #CFD3D9; /* strong border */ --tq-graphite-900: #101317; /* ▸ CHROME — header, footer, dark bands. oklch(.185 .010 258): the logo's ink */ --tq-graphite-800: #191C20; /* chrome, one step up */ --tq-graphite-700: #24272C; /* chrome hover, hairline hi */ /* text on paper — every step measured on white / bg / sunken */ --tq-t-strong: #14171D; /* 17.95 · 16.71 · 15.72 */ --tq-t-body: #32363C; /* 12.15 · 11.31 · 10.64 */ --tq-t-muted: #575B62; /* 6.82 · 6.35 · 5.98 */ --tq-t-subtle: #6A6D73; /* 5.19 · 4.83 · 4.54 — the floor */ --tq-t-disabled: #9B9FA3; /* ▸ NOT A TEXT COLOUR (disabled state only) */ /* ── 4 · ROLES — LIGHT (default) ─────────────────────────────────────── */ color-scheme: light; --tq-bg: var(--tq-paper-100); --tq-bg-sunken: var(--tq-paper-200); --tq-surface: var(--tq-paper-0); --tq-surface-2: var(--tq-paper-50); --tq-surface-3: var(--tq-paper-200); --tq-surface-hover: var(--tq-paper-200); --tq-overlay: var(--tq-paper-0); --tq-chrome: var(--tq-graphite-900); --tq-chrome-2: var(--tq-graphite-800); --tq-text: var(--tq-t-strong); --tq-text-strong: var(--tq-t-strong); --tq-text-body: var(--tq-t-body); --tq-text-muted: var(--tq-t-muted); --tq-text-subtle: var(--tq-t-subtle); --tq-text-disabled: var(--tq-t-disabled); --tq-text-on-chrome: var(--tq-ink-950); /* 17.08 on graphite-900 */ --tq-text-on-chrome-muted: var(--tq-ink-700); /* 7.27 */ --tq-line: rgb(var(--tq-steel-rgb) / .10); --tq-line-soft: rgb(var(--tq-steel-rgb) / .065); --tq-line-strong: rgb(var(--tq-steel-rgb) / .18); --tq-line-chrome: rgb(var(--tq-white-rgb) / .09); --tq-fill-1: rgb(var(--tq-steel-rgb) / .035); --tq-fill-2: rgb(var(--tq-steel-rgb) / .06); --tq-fill-3: rgb(var(--tq-steel-rgb) / .09); /* the signal, in its light-theme roles */ --tq-accent: var(--tq-brand-600); /* fills: carries white 4.69 */ --tq-accent-hi: var(--tq-brand-650); /* hover 5.21 */ --tq-accent-press: var(--tq-brand-750); /* press 5.81 */ --tq-accent-text: var(--tq-brand-700); /* links, lit labels ≥5.25 */ --tq-accent-soft: var(--tq-brand-100); /* selected wash */ --tq-accent-rgb: 211 62 33; --tq-accent-text-rgb: 184 50 23; --tq-on-accent: #FFFFFF; /* status — text-grade on paper (≥4.5 on white, bg and sunken) */ --tq-success: #007749; --tq-success-rgb: 0 119 73; /* 5.62 · 4.92 */ --tq-warning: #975D04; --tq-warning-rgb: 151 93 4; /* 5.41 · 4.74 */ --tq-danger: #BF124E; --tq-danger-rgb: 191 18 78; /* 6.16 · 5.39 — crimson, hue 10: it must never read as the orange */ --tq-danger-fill: #BF124E; --tq-danger-fill-hi: #A90E44; --tq-info: #026A9D; --tq-info-rgb: 2 106 157; /* 5.91 · 5.18 */ /* elevation on paper: tinted with the steel, never pure black */ --tq-el-0: none; --tq-el-1: 0 1px 2px rgb(var(--tq-steel-rgb) / .06), 0 0 0 1px rgb(var(--tq-steel-rgb) / .05); --tq-el-2: 0 2px 6px -1px rgb(var(--tq-steel-rgb) / .08), 0 1px 2px rgb(var(--tq-steel-rgb) / .05); --tq-el-3: 0 12px 28px -10px rgb(var(--tq-steel-rgb) / .16), 0 2px 6px -2px rgb(var(--tq-steel-rgb) / .06); --tq-el-4: 0 24px 56px -18px rgb(var(--tq-steel-rgb) / .24), 0 4px 12px -4px rgb(var(--tq-steel-rgb) / .08); --tq-el-5: 0 36px 80px -24px rgb(var(--tq-steel-rgb) / .30); --tq-glow: 0 10px 24px -10px rgb(var(--tq-accent-rgb) / .55); /* THE LANE — the system's signature: a road's centre line, dashed in the signal colour. It opens under a primary action on hover, runs under an active tab, and marks the edge of a selected card. */ --tq-grad-signature: repeating-linear-gradient(90deg, rgb(var(--tq-accent-text-rgb)) 0 9px, transparent 9px 14px); --tq-grad-hair: linear-gradient(90deg, transparent, rgb(var(--tq-steel-rgb) / .14) 22%, rgb(var(--tq-steel-rgb) / .14) 78%, transparent); /* one focus ring: a gap in the ground colour, then the signal */ --tq-ring: 0 0 0 2px var(--tq-bg), 0 0 0 4px rgb(var(--tq-accent-rgb) / .90); --tq-ring-danger: 0 0 0 2px var(--tq-bg), 0 0 0 4px rgb(var(--tq-danger-rgb) / .85); /* ── 5 · TYPE ───────────────────────────────────────────────────────── Ratio 1.2 from a 16px base. Every step pairs a size with its tracking and leading — never set one without the others. */ --tq-font-sans: "Barlow", "Barlow Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --tq-font-display: "Barlow Condensed", "Barlow", "Arial Narrow", "Roboto Condensed", ui-sans-serif, sans-serif; /* the kit's instrument read-outs (eyebrows, IDs, counters) — condensed with tabular figures does the job a mono did, in the house voice */ --tq-font-mono: var(--tq-font-display); --tq-fs-3xs: 0.6875rem; /* 11.00 */ --tq-fs-2xs: 0.75rem; /* 12.00 */ --tq-fs-xs: 0.8333rem; /* 13.33 */ --tq-fs-sm: 0.875rem; /* 14.00 */ --tq-fs-md: 1rem; /* 16.00 ← base */ --tq-fs-lg: 1.2rem; /* 19.20 */ --tq-fs-xl: 1.44rem; /* 23.04 */ --tq-fs-2xl: 1.728rem; /* 27.65 */ --tq-fs-3xl: 2.0736rem; /* 33.18 */ --tq-fs-4xl: 2.4883rem; /* 39.81 */ --tq-fs-5xl: 2.986rem; /* 47.78 */ --tq-fs-6xl: 3.5832rem; /* 57.33 */ --tq-fs-7xl: 4.2998rem; /* 68.80 */ --tq-fs-8xl: 5.1598rem; /* 82.56 */ /* fluid display steps (Barlow Condensed, set in capitals) */ --tq-fs-d0: clamp(3rem, 1.6rem + 6.2vw, 6.6rem); --tq-fs-d1: clamp(2.5rem, 1.45rem + 4.6vw, 5rem); --tq-fs-d2: clamp(2.05rem, 1.35rem + 3.1vw, 3.6rem); --tq-fs-d3: clamp(1.7rem, 1.25rem + 1.95vw, 2.6rem); --tq-fs-d4: clamp(1.4rem, 1.15rem + 1.1vw, 2rem); --tq-tr-caps: 0.06em; /* condensed capitals, eyebrows */ --tq-tr-micro: 0.04em; /* 11–12px */ --tq-tr-body: 0em; --tq-tr-lead: -0.006em; --tq-tr-head: -0.012em; --tq-tr-display: 0.005em; /* condensed caps want air, not squeeze */ --tq-lh-flat: 1.0; --tq-lh-display: 0.98; --tq-lh-head: 1.15; --tq-lh-lead: 1.5; --tq-lh-body: 1.62; --tq-lh-micro: 1.4; --tq-fw-regular: 400; --tq-fw-medium: 500; --tq-fw-semibold: 600; --tq-fw-bold: 700; /* ── 6 · SPACE — 4px base, 8px rhythm ─────────────────────────────────── */ --tq-sp-0: 0; --tq-sp-1: 0.125rem; /* 2 */ --tq-sp-2: 0.25rem; /* 4 */ --tq-sp-3: 0.375rem; /* 6 */ --tq-sp-4: 0.5rem; /* 8 */ --tq-sp-5: 0.75rem; /* 12 */ --tq-sp-6: 1rem; /* 16 */ --tq-sp-7: 1.25rem; /* 20 */ --tq-sp-8: 1.5rem; /* 24 */ --tq-sp-9: 2rem; /* 32 */ --tq-sp-10: 2.5rem; /* 40 */ --tq-sp-11: 3rem; /* 48 */ --tq-sp-12: 4rem; /* 64 */ --tq-sp-13: 5rem; /* 80 */ --tq-sp-14: 6rem; /* 96 */ --tq-sp-15: 8rem; /* 128 */ --tq-gutter: clamp(1rem, 0.45rem + 2.6vw, 2.5rem); --tq-section: clamp(3.5rem, 2rem + 6.5vw, 7.5rem); --tq-container: 1240px; --tq-container-wide: 1440px; --tq-container-prose: 68ch; /* ── 7 · RADII — pressed things are capsules, typed-into things are rectangles, and a nested shape is concentric with its parent ──────── */ --tq-r-xs: 6px; --tq-r-sm: 10px; /* fields */ --tq-r-md: 14px; /* cards */ --tq-r-lg: 18px; --tq-r-xl: 24px; /* sheets, big media */ --tq-r-2xl: 32px; --tq-r-full: 999px; /* ── 8 · MOTION — mechanical: short, decisive, settles without a wobble. Only a confirmation is allowed a spring. */ --tq-d-instant: 90ms; --tq-d-fast: 140ms; --tq-d-base: 220ms; --tq-d-slow: 340ms; --tq-d-slower: 560ms; --tq-d-ambient: 900ms; --tq-ease: cubic-bezier(.4, 0, .2, 1); --tq-ease-out: cubic-bezier(.19, 1, .22, 1); /* expo out */ --tq-ease-in-out: cubic-bezier(.76, 0, .24, 1); --tq-ease-accel: cubic-bezier(.55, 0, 1, .45); --tq-ease-spring: linear( 0, .0088 1.3%, .0347 2.7%, .1252 5.4%, .2739 8.4%, .4409 11.3%, .6094 14.2%, .7644 17.2%, .8979 20.5%, .9494 22.2%, .9911 24%, 1.0239 25.9%, 1.0477 27.9%, 1.0629 30.2%, 1.0695 33%, 1.066 36.6%, 1.0402 45.2%, 1.0152 55.4%, .9994 68.7%, .9985 84.3%, 1); --tq-t-color: color var(--tq-d-fast) var(--tq-ease), background-color var(--tq-d-fast) var(--tq-ease), border-color var(--tq-d-fast) var(--tq-ease); --tq-t-lift: transform var(--tq-d-base) var(--tq-ease-out), box-shadow var(--tq-d-base) var(--tq-ease-out); /* ── 9 · Z-INDEX ───────────────────────────────────────────────────────── */ --tq-z-behind: -1; --tq-z-base: 0; --tq-z-raised: 10; --tq-z-sticky: 100; --tq-z-header: 200; --tq-z-drawer: 300; --tq-z-backdrop: 400; --tq-z-modal: 410; --tq-z-popover: 500; --tq-z-tooltip: 600; --tq-z-toast: 700; /* ── 10 · CONTROLS ───────────────────────────────────────────────────── */ --tq-control-h-sm: 36px; --tq-control-h: 46px; --tq-control-h-lg: 56px; --tq-tap-min: 44px; /* WCAG 2.5.5 */ --tq-btn-h-sm: 36px; --tq-btn-h: 46px; --tq-btn-h-lg: 56px; } /* ── 4 · ROLES — PAPER, AGAIN: .tq-paper ──────────────────────────────── A paper island inside a graphite band — a price tag pinned to the hero photo, a white card in a dark section. The light roles, restated, so everything inside it reads as it would on the page. This block is the :root role block verbatim; the build checks the two never drift. */ .tq-paper { color-scheme: light; --tq-bg: var(--tq-paper-100); --tq-bg-sunken: var(--tq-paper-200); --tq-surface: var(--tq-paper-0); --tq-surface-2: var(--tq-paper-50); --tq-surface-3: var(--tq-paper-200); --tq-surface-hover: var(--tq-paper-200); --tq-overlay: var(--tq-paper-0); --tq-chrome: var(--tq-graphite-900); --tq-chrome-2: var(--tq-graphite-800); --tq-text: var(--tq-t-strong); --tq-text-strong: var(--tq-t-strong); --tq-text-body: var(--tq-t-body); --tq-text-muted: var(--tq-t-muted); --tq-text-subtle: var(--tq-t-subtle); --tq-text-disabled: var(--tq-t-disabled); --tq-text-on-chrome: var(--tq-ink-950); /* 17.08 on graphite-900 */ --tq-text-on-chrome-muted: var(--tq-ink-700); /* 7.27 */ --tq-line: rgb(var(--tq-steel-rgb) / .10); --tq-line-soft: rgb(var(--tq-steel-rgb) / .065); --tq-line-strong: rgb(var(--tq-steel-rgb) / .18); --tq-line-chrome: rgb(var(--tq-white-rgb) / .09); --tq-fill-1: rgb(var(--tq-steel-rgb) / .035); --tq-fill-2: rgb(var(--tq-steel-rgb) / .06); --tq-fill-3: rgb(var(--tq-steel-rgb) / .09); /* the signal, in its light-theme roles */ --tq-accent: var(--tq-brand-600); /* fills: carries white 4.69 */ --tq-accent-hi: var(--tq-brand-650); /* hover 5.21 */ --tq-accent-press: var(--tq-brand-750); /* press 5.81 */ --tq-accent-text: var(--tq-brand-700); /* links, lit labels ≥5.25 */ --tq-accent-soft: var(--tq-brand-100); /* selected wash */ --tq-accent-rgb: 211 62 33; --tq-accent-text-rgb: 184 50 23; --tq-on-accent: #FFFFFF; /* status — text-grade on paper (≥4.5 on white, bg and sunken) */ --tq-success: #007749; --tq-success-rgb: 0 119 73; /* 5.62 · 4.92 */ --tq-warning: #975D04; --tq-warning-rgb: 151 93 4; /* 5.41 · 4.74 */ --tq-danger: #BF124E; --tq-danger-rgb: 191 18 78; /* 6.16 · 5.39 — crimson, hue 10: it must never read as the orange */ --tq-danger-fill: #BF124E; --tq-danger-fill-hi: #A90E44; --tq-info: #026A9D; --tq-info-rgb: 2 106 157; /* 5.91 · 5.18 */ /* elevation on paper: tinted with the steel, never pure black */ --tq-el-0: none; --tq-el-1: 0 1px 2px rgb(var(--tq-steel-rgb) / .06), 0 0 0 1px rgb(var(--tq-steel-rgb) / .05); --tq-el-2: 0 2px 6px -1px rgb(var(--tq-steel-rgb) / .08), 0 1px 2px rgb(var(--tq-steel-rgb) / .05); --tq-el-3: 0 12px 28px -10px rgb(var(--tq-steel-rgb) / .16), 0 2px 6px -2px rgb(var(--tq-steel-rgb) / .06); --tq-el-4: 0 24px 56px -18px rgb(var(--tq-steel-rgb) / .24), 0 4px 12px -4px rgb(var(--tq-steel-rgb) / .08); --tq-el-5: 0 36px 80px -24px rgb(var(--tq-steel-rgb) / .30); --tq-glow: 0 10px 24px -10px rgb(var(--tq-accent-rgb) / .55); /* THE LANE — the system's signature: a road's centre line, dashed in the signal colour. It opens under a primary action on hover, runs under an active tab, and marks the edge of a selected card. */ --tq-grad-signature: repeating-linear-gradient(90deg, rgb(var(--tq-accent-text-rgb)) 0 9px, transparent 9px 14px); --tq-grad-hair: linear-gradient(90deg, transparent, rgb(var(--tq-steel-rgb) / .14) 22%, rgb(var(--tq-steel-rgb) / .14) 78%, transparent); /* one focus ring: a gap in the ground colour, then the signal */ --tq-ring: 0 0 0 2px var(--tq-bg), 0 0 0 4px rgb(var(--tq-accent-rgb) / .90); --tq-ring-danger: 0 0 0 2px var(--tq-bg), 0 0 0 4px rgb(var(--tq-danger-rgb) / .85); color: var(--tq-text-body); } /* ── 4 · ROLES — DARK (the dash) ───────────────────────────────────────── Put class="tq-dark" on . Every role flips; the scales above do not. */ .tq-dark { color-scheme: dark; --tq-bg: var(--tq-ink-050); --tq-bg-sunken: var(--tq-ink-025); --tq-surface: var(--tq-ink-100); --tq-surface-2: var(--tq-ink-150); --tq-surface-3: var(--tq-ink-200); --tq-surface-hover: var(--tq-ink-200); --tq-overlay: var(--tq-ink-150); --tq-chrome: var(--tq-ink-100); --tq-chrome-2: var(--tq-ink-150); --tq-text: var(--tq-ink-900); --tq-text-strong: var(--tq-ink-950); --tq-text-body: var(--tq-ink-800); --tq-text-muted: var(--tq-ink-700); --tq-text-subtle: var(--tq-ink-650); --tq-text-disabled: var(--tq-ink-500); --tq-text-on-chrome: var(--tq-ink-950); --tq-text-on-chrome-muted: var(--tq-ink-700); --tq-line: rgb(var(--tq-white-rgb) / .09); --tq-line-soft: rgb(var(--tq-white-rgb) / .055); --tq-line-strong: rgb(var(--tq-white-rgb) / .16); --tq-line-chrome: rgb(var(--tq-white-rgb) / .09); --tq-fill-1: rgb(var(--tq-white-rgb) / .035); --tq-fill-2: rgb(var(--tq-white-rgb) / .06); --tq-fill-3: rgb(var(--tq-white-rgb) / .09); --tq-accent: var(--tq-brand-600); /* carries white 4.69 */ --tq-accent-hi: var(--tq-brand-650); /* hover — deeper, never lighter */ --tq-accent-press: var(--tq-brand-750); --tq-accent-text: var(--tq-brand-glow); /* 7.58 on 200 · 6.39 on 300 */ --tq-accent-soft: rgb(var(--tq-accent-rgb) / .16); --tq-accent-rgb: 211 62 33; --tq-accent-text-rgb: 255 143 87; --tq-on-accent: #FFFFFF; --tq-success: #00D89F; --tq-success-rgb: 0 216 159; --tq-warning: #F5B430; --tq-warning-rgb: 245 180 48; --tq-danger: #FC436F; --tq-danger-rgb: 252 67 111; /* text / border */ --tq-danger-fill: #C70046; /* carries white 5.97 */ --tq-danger-fill-hi: #D50B51; --tq-info: #03C3F7; --tq-info-rgb: 3 195 247; --tq-el-1: 0 1px 2px rgb(var(--tq-black-rgb) / .40); --tq-el-2: 0 2px 10px -2px rgb(var(--tq-black-rgb) / .45); --tq-el-3: 0 8px 28px -8px rgb(var(--tq-black-rgb) / .55); --tq-el-4: 0 20px 56px -16px rgb(var(--tq-black-rgb) / .60); --tq-el-5: 0 32px 80px -24px rgb(var(--tq-black-rgb) / .65); --tq-glow: 0 10px 26px -10px rgb(var(--tq-accent-rgb) / .60); --tq-grad-hair: linear-gradient(90deg, transparent, rgb(var(--tq-white-rgb) / .14) 22%, rgb(var(--tq-white-rgb) / .14) 78%, transparent); /* restated so a dark band inside a paper page paints the lane from ITS accent (the glow), not the paper's darker one it would otherwise inherit */ --tq-grad-signature: repeating-linear-gradient(90deg, rgb(var(--tq-accent-text-rgb)) 0 9px, transparent 9px 14px); --tq-ring: 0 0 0 2px var(--tq-bg), 0 0 0 4px rgb(var(--tq-accent-text-rgb) / .90), 0 0 0 5px rgb(var(--tq-black-rgb) / .35); --tq-ring-danger: 0 0 0 2px var(--tq-bg), 0 0 0 4px rgb(var(--tq-danger-rgb) / .85), 0 0 22px -2px rgb(var(--tq-danger-rgb) / .40); } /* ── 11 · BREAKPOINTS ──────────────────────────────────────────────────── Custom properties cannot be used inside @media, so these are the values to type by hand. Mobile first: write the phone rule, then widen. sm 480 · md 768 · lg 1024 · xl 1280 · 2xl 1536 */ /* ── 12 · REDUCED MOTION ───────────────────────────────────────────────── Every duration is a token, so one switch stops the whole system. */ @media (prefers-reduced-motion: reduce) { :root, .tq-dark { --tq-d-instant: 1ms; --tq-d-fast: 1ms; --tq-d-base: 1ms; --tq-d-slow: 1ms; --tq-d-slower: 1ms; --tq-d-ambient: 1ms; } }