/* ========================================================================== HelpGent — design tokens (loaded on every page, before common.css) The single source for colour, type, spacing, radius, shadow, size and motion. Reference: HelpGent Design System — https://claude.ai/artifact/KPCK9s3fPvoDUGz6auGfkm 1 · System tokens — the design system's names and values. Use these in new CSS. 2 · Midnight theme — set data-theme="midnight" on a dark band and the colour tokens switch. 3 · Legacy names — the names the theme uses today, pointed at the system tokens. Where today's value differs from the system's, the old value is kept (marked STEP 2) so nothing changes visually until each page is migrated. ========================================================================== */ /* ── 1 · System tokens ──────────────────────────────────────────────────── */ :root{ /* surfaces */ --surface:#FFFFFF; --surface-subtle:#F8F7FC; /* alternating section band */ --surface-raised:#FFFFFF; /* cards, dropdowns, modals */ --surface-overlay:rgb(11 17 56 / .45); /* scrim behind the mobile menu and modals */ /* ink */ --ink:#383345; /* headings and body — 12.2:1 on white */ --ink-muted:#5E586B; /* leads, card text — 6.8:1 on white */ --ink-subtle:#746D83; /* meta, captions, placeholders — 4.9:1 on white; min 13px */ /* lines */ --line:#E9E7EF; /* card borders, dividers */ --line-strong:#DAD6E3; /* input borders, outlines */ --line-accent:#D9D3FD; /* hairline on accent-soft panels, selected chips */ /* accent — indigo, matching the plugin. The *-rgb twins feed translucent glows: rgb(var(--accent-rgb) / .35) */ --accent:#6551F2; --accent-rgb:101 81 242; --accent-hover:#4F3BD9; --accent-hover-rgb:79 59 217; --accent-text:#6551F2; /* links, eyebrows; periwinkle on Midnight */ --accent-soft:#EEEBFE; /* icon wells, selected fills — text on it is accent-hover */ --on-accent:#FFFFFF; --link:var(--accent-text); --focus-ring:#6551F2; /* 2px solid, 2px offset */ --marker:#33A1FF; /* hand-drawn underline and arrows */ --star:#E9993C; /* rating stars */ /* status — fill/icon, text, soft background */ --success:#2E9E4E; --success-text:#1F7A3A; --success-soft:#EAF7EE; --warning:#D9822B; --warning-text:#7A4E12; --warning-soft:#FDF3E6; --danger:#C4373C; --danger-text:#B4262B; --danger-soft:#FDECEC; /* Midnight scale — the dark brand surfaces */ --midnight-900:#070B24; --midnight-800:#0B1138; --midnight-rgb:11 17 56; --midnight-700:#141C52; --midnight-600:#1A2A6E; --midnight-500:#1F3A9E; --midnight-400:#1E45C4; /* Spectrum — the stops that follow --accent in gradients and glows (never text or buttons) */ --spectrum-blue:#0075FF; --spectrum-blue-rgb:0 117 255; --spectrum-sky:#008AFF; --spectrum-sky-rgb:0 138 255; --spectrum-azure:#0095E2; --spectrum-azure-rgb:0 149 226; --spectrum-azure-tint:#5CC3F5; --spectrum-azure-tint-rgb:92 195 245; --spectrum-cobalt:#3D6BFF; --periwinkle:#9EB3FF; --periwinkle-rgb:158 179 255; --wash-blue:#E2EEFF; --wash-sky:#DDF0FF; /* type — General Sans for all text, Caveat only for the handwritten aside */ --font-sans:"General Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --font-hand:"Caveat",cursive; /* fluid sizes, solved from measurements @1680px and @841px — no typography breakpoints */ --fs-display: clamp(2.1rem, 2.1rem + 1.43vw, 3.6rem); /* 33.6 -> 57.6 */ --fs-h2: clamp(1.5rem, 1.5rem + 0.86vw, 2.4rem); /* 24 -> 38.4 */ --fs-h3-lg: clamp(0.95rem, 0.95rem + 0.43vw, 1.4rem); /* 15.2 -> 22.4 · STEP 2: floor to 1.125rem (18px) */ --fs-h3: clamp(0.89rem, 0.89rem + 0.29vw, 1.2rem); /* 14.2 -> 19.2 · STEP 2: floor to 1rem (16px) */ --fs-body: clamp(1rem, 0.99rem + 0.1vw, 1.1rem); /* 16 -> 17.6 */ --fs-body-sm: 15px; /* card captions, labels, eyebrows */ --fs-caption: 14px; /* helper text, pills, legal row */ --fs-meta: 13px; /* dates, badges, nav descriptions */ --fs-overline:12px; /* uppercase nav-chrome labels, +0.08em */ --lh-tight:1.1; --lh-heading:1.2; --lh-body:1.75; --ls-heading:-0.8px; /* spacing — 4px grid */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-14:56px; --space-16:64px; --space-20:80px; --section-y:56px; /* .sec */ --section-y-lg:80px; /* .sec--lg */ --hero-top:160px; /* every dark hero / title band; 128px on phones */ /* radius by role. STEP 2: --radius-lg becomes 12px once its 16px uses move to --radius-xl (see section 3). */ --radius-xs:4px; /* badges, checkboxes */ --radius-sm:6px; /* inline code, kbd */ --radius-md:8px; /* buttons, inputs, icon wells */ --radius-xl:16px; /* cards, panels, dropdowns, media frames */ --radius-2xl:24px; /* large feature panels, template cards */ --radius-full:999px; /* pills, chips, segmented control */ /* shadows — all tinted Midnight */ --shadow-sm:0 6px 18px rgb(11 17 56 / .08); --shadow-raise:0 28px 70px rgb(11 17 56 / .18); --shadow-overlay:0 24px 60px rgb(11 17 56 / .35); --shadow-accent:0 10px 24px rgb(101 81 242 / .35); /* sizes */ --container:1200px; --gutter:24px; /* 18px under 680px (common.css) · STEP 2: 16px under 640px */ --measure-sm:640px; --measure-md:760px; --measure-lg:900px; --header-h:80px; --header-h-stuck:66px; --control-sm:44px; --control-md:50px; --control-lg:64px; --icon-sm:16px; --icon-md:20px; --icon-lg:24px; /* breakpoints (media queries can't read custom properties — use these numbers): 640 phones · 900 tablets · 1024 burger menu · 1200 small laptops */ /* layers */ --z-overlay:110; --z-header:120; --z-modal:200; --z-skip:300; /* motion */ --dur-fast:150ms; --dur-ui:200ms; --dur-slow:350ms; --ease-out:cubic-bezier(.2,.8,.2,1); /* entrances, hover lifts, panels */ --ease-draw:cubic-bezier(.65,0,.35,1); /* drawn underlines, toggle thumb */ --lift:-3px; /* hover lift for linked cards */ } /* ── 2 · Midnight theme — dark bands (hero, proof, footer, closer) ───────── */ [data-theme="midnight"]{ --surface:#0B1138; --surface-subtle:#141C52; --surface-raised:rgb(255 255 255 / .07); --surface-overlay:rgb(7 11 36 / .6); --ink:#FFFFFF; --ink-muted:rgb(255 255 255 / .72); --ink-subtle:rgb(255 255 255 / .55); --line:rgb(255 255 255 / .14); --line-strong:rgb(255 255 255 / .24); --line-accent:rgb(158 179 255 / .3); --accent-text:#9EB3FF; --accent-soft:rgb(158 179 255 / .14); --focus-ring:#9EB3FF; --success:#5FD4BD; --success-text:#5FD4BD; --success-soft:rgb(95 212 189 / .14); --warning:#E9993C; --warning-text:#E9993C; --warning-soft:rgb(233 153 60 / .14); --danger:#F0717A; --danger-text:#F0717A; --danger-soft:rgb(240 113 122 / .14); --shadow-sm:0 6px 18px rgb(0 0 0 / .3); --shadow-raise:0 30px 60px rgb(0 0 0 / .45); --shadow-overlay:0 24px 60px rgb(0 0 0 / .5); } /* ── 3 · Legacy names — what the theme's CSS uses today ─────────────────── */ :root{ /* dark surfaces */ --dark:var(--midnight-800); --dark-rgb:var(--midnight-rgb); --dark-2:var(--midnight-700); --dark-deep:var(--midnight-500); --dark-0:var(--midnight-900); --dark-mid:var(--midnight-600); --dark-3:var(--midnight-400); --dark-panel-rgb:20 28 82; --dark-panel-2-rgb:12 18 58; /* showcase glass panel */ /* accent (--accent, --accent-hover, --accent-soft and their -rgb twins are the system tokens) */ --accent-tint:var(--periwinkle); --accent-tint-rgb:var(--periwinkle-rgb); /* text */ --text:var(--ink); --text-2:#6B6577; /* STEP 2: → var(--ink-muted) #5E586B (darker, clearer step) */ --text-3:var(--ink-subtle); /* ROLLBACK: previous lighter grey (2.9:1, fails AA) was #9A94A6 */ --white:#FFFFFF; --tint:var(--surface-subtle); --line-2:var(--line-strong); --paper:#F5F4FB; /* STEP 2: → var(--surface-subtle) */ --paper-line:#E7E3F3; /* STEP 2: → var(--line) */ /* gradient stops */ --hue-2:var(--spectrum-blue); --hue-2-rgb:var(--spectrum-blue-rgb); --hue-3:var(--spectrum-sky); --hue-3-rgb:var(--spectrum-sky-rgb); --hue-4:var(--spectrum-azure); --hue-4-rgb:var(--spectrum-azure-rgb); --hue-4-tint:var(--spectrum-azure-tint); --hue-4-tint-rgb:var(--spectrum-azure-tint-rgb); --hue-5:var(--spectrum-cobalt); --glow-1-rgb:var(--spectrum-blue-rgb); /* hero glow, top-left */ --glow-2-rgb:var(--spectrum-azure-rgb); /* hero glow, top-right */ --glow-3-rgb:var(--spectrum-sky-rgb); /* hero glow, bottom-right */ --wash-1:#ECE9FE; /* STEP 2: → var(--accent-soft) */ --wash-2:var(--wash-blue); --wash-3:var(--wash-sky); /* radius */ --radius:var(--radius-md); --radius-lg:16px; /* STEP 2: rename uses to --radius-xl; then this becomes the system's 12px */ /* shadows */ --shadow-card:0 5px 22px rgba(0,0,0,.06); /* STEP 2: → Midnight tint 0 5px 22px rgb(11 17 56 / .06) */ --ring:0 0 0 3px rgb(var(--accent-rgb) / .35); /* STEP 2: → outline 2px solid var(--focus-ring) */ /* type */ --font:var(--font-sans); --hand:var(--font-hand); --ls-h2:var(--ls-heading); /* section rhythm */ --pad:54px; /* STEP 2: → var(--section-y) 56px */ --pad-lg:81px; /* STEP 2: → var(--section-y-lg) 80px */ /* motion */ --t-ui:var(--dur-ui) ease-out; }