/**
 * Edventures Design System
 * GENERATED FILE: do NOT edit by hand.
 * Source of truth: tokens/src/*.json | Rebuild: npm run tokens
 * Tiers: primitive → semantic → component. See docs/tokens.md.
 */

[data-theme="dark"] {
  --violet-50: #F4EFFF; /** Faintest violet wash, large tinted backgrounds, hero gradient start. */
  --violet-100: #E9DEFF; /** Subtle violet, chips, soft fills, gradient mid. */
  --violet-500: #7100FF; /** BASE brand colour. Locked, never modernised. Primary buttons, links, focus. */
  --violet-700: #5400BF; /** Pressed / hover violet. */
  --violet-900: #2E0066; /** Deepest violet, strong contrast on light tints. */
  --violet-on-muted: #E6DCFF; /** Muted text on violet surfaces (e.g. featured card body). */
  --lime: #C6FF3D; /** Lime accent, ONE highlight moment per screen. Never body text, never on white. */
  --lime-soft: #EAFFC2; /** Soft lime, gradient end, gentle fills. */
  --lime-shade: #94C02A; /** Darkened lime, inner borders on lime-filled elements (badge pressed state). Analogous to violet-700 for violet. */
  --pink: #FF3D9A; /** Pink accent, punctuation, tags, sparing emphasis. */
  --pink-soft: #FFD9EC; /** Soft pink, badge fills. */
  --pink-shade: #C92E76; /** Darkened pink, inner borders on pink-filled elements. Distinct from pink-deep (#9B0F50) which is AA text on pink-soft. */
  --pink-deep: #9B0F50; /** Deep pink, AA-legible text on pink-soft. */
  --mint: #3DE0B4; /** Mint accent, lime-band shadow rhythm and hover lifts (contrasts lime ground). Proposal: verify against brand. */
  --mint-shade: #26A784; /** Darkened mint, hover shadow on lime bands. */
  --ink: #120B22; /** Near-black ink, the fixed brand colour of ink bands, ink shadows and the footer. Theme-invariant. Text and borders use the text / border-color roles. */
  --white: #FFFFFF; /** Pure white, text on violet; the light card fill. */
  --black: #000000; /** Pure black, hard offset shadow colour on the dark theme (role: shadow). */
  --neutral-900: #1A1230; /** Neutral ramp (purple-tinted, dark → light). Card / nav surface on the dark theme (role: surface). */
  --neutral-850: #241838; /** Neutral ramp. Raised dark surface: hover wash, disabled fill on the dark theme. */
  --neutral-800: #2A2140; /** Neutral ramp. Hairline divider on the dark theme (role: line); disabled and soft borders on dark. */
  --neutral-700: #4A3D66; /** Neutral ramp. The soft product-card border on light (color-border-soft). */
  --neutral-600: #5B5470; /** Neutral ramp. Secondary text on light (role: text-muted); AA 6.9:1 on paper. */
  --neutral-550: #6B6385; /** Neutral ramp. Disabled text on the dark theme. */
  --neutral-500: #6F678F; /** Neutral ramp. Muted / placeholder text on light (role: text-subtle); AA 5.0:1 on paper, 5.2:1 on surface, 4.6:1 on paper-tint. */
  --neutral-450: #8F87A6; /** Neutral ramp. Signature border on the dark theme (role: border-color), 3:1 or better on the dark page, surface and raised band (4.7 / 5.3 / 3.6); also AA text on an ink band (5.6:1). */
  --neutral-400: #A39CB5; /** Neutral ramp. Disabled text on light; muted / placeholder text on the dark theme (role: text-subtle), AA 6.1:1 on the dark page, 6.8:1 on surface, 4.6:1 on the raised band. */
  --neutral-300: #B8B0CC; /** Neutral ramp. Secondary text on the dark theme (role: text-muted). */
  --neutral-250: #C9C3D6; /** Neutral ramp. Disabled border on light. */
  --neutral-200: #E7E2F2; /** Neutral ramp. Hairline divider on light (role: line). */
  --neutral-150: #F1EEF7; /** Neutral ramp. Disabled background on light. */
  --neutral-100: #F4F1FA; /** Neutral ramp. Primary text on the dark theme (role: text). */
  --neutral-50: #FBFAFF; /** Neutral ramp. Page background on light (role: paper). */
  --plum-950: #1C1338; /** Plum ramp (desaturated violet tints). Faint violet wash on the dark theme (role: primary-faint). */
  --plum-900: #2F1E5C; /** Plum ramp. Softer violet tint fill on dark: where light primary-faint is a FILL (its dark value is too close to surface to read as a tint). */
  --plum-800: #3D2478; /** Plum ramp. Raised violet band ground and tint fill on dark (role: paper-tint), lifted off the violet-900 page, which primary-subtle equals and so vanishes. */
  --plum-600: #5A3FA0; /** Plum ramp. Higher-contrast violet ghost on the dark page: decorative step numbers and fade numerals. */
  --violet-bright: #B794FF; /** Lightened violet, AA-legible links / icons / violet TEXT on dark (role: link). The base #7100FF stays for fills. */
  --green: #16A34A; /** Success hue. */
  --green-shade: #0F7A37; /** Darkened green, inner borders on green-filled elements (card-chrome traffic-light dot). */
  --amber: #FFB020; /** Warning hue. */
  --amber-shade: #C78818; /** Darkened amber, inner borders on amber-filled elements (card-chrome traffic-light dot). */
  --red: #FF3D5D; /** Error hue. */
  --red-shade: #C92E48; /** Darkened red, inner borders on red-filled elements (card-chrome traffic-light dot). */
  --ff-display: "Funnel Display", "General Sans", sans-serif; /** Headings / display. */
  --ff-body: "General Sans", system-ui, sans-serif; /** Body + UI. */
  --ff-mono: ui-monospace, "Cascadia Code", "Source Code Pro", monospace; /** Monospace, code samples, token labels, blog card cover placeholders. */
  --fs-display: 64px;
  --fs-display-xl: 84px; /** Landing-page hero headline: exceeds the 64px display cap intentionally. */
  --fs-section: 48px; /** Marketing section heading: partners, newsletter, FAQ embed. */
  --fs-h1: 40px;
  --fs-h2: 28px;
  --fs-h3: 20px;
  --fs-quote: 22px; /** Testimonial / pull-quote body: one step above h3. */
  --fs-body: 16px; /** Default body size; web xs ramp may use 14px floor: see docs/responsiveness.md. */
  --fs-small: 14px;
  --fs-label: 12px;
  --fw-display: 800;
  --fw-section: 800;
  --fw-h1: 800;
  --fw-h2: 700;
  --fw-h3: 600;
  --fw-quote: 600;
  --fw-body: 400;
  --fw-small: 500;
  --fw-label: 700;
  --lh-display: 1;
  --lh-section: 1.15;
  --lh-h1: 1.02;
  --lh-h2: 1.1;
  --lh-h3: 1.25;
  --lh-quote: 1.4;
  --lh-body: 1.6;
  --lh-small: 1.5;
  --lh-label: 1.5; /** Uppercase label line-height. */
  --ls-tight: -0.02em; /** Display, section & H1 tracking. */
  --ls-label: 1.5px; /** Uppercase label tracking. */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
  --bw-hairline: 1.5px; /** Badges / pills. */
  --bw-default: 2px; /** The signature ink border. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --layout-list-max-width: 1120px; /** Listing grids, category rows, help home: matches partners/testimonial inner width. */
  --layout-article-max-width: 720px; /** Single post or help article reading column. */
  --layout-nav-max-width: 1040px; /** Floating nav pill max width. Also the x-origin the article back-link aligns to. */
  --button-shadow: none;
  --button-pad-y: 12px;
  --button-pad-x: 26px;
  --button-sm-pad-y: 8px;
  --button-sm-pad-x: 16px;
  --button-sm-shadow: none;
  --button-lg-pad-y: 16px;
  --button-lg-pad-x: 34px;
  --button-lg-font-size: 18px; /** Between body and h3, large CTA. */
  --button-lg-radius: 14px;
  --button-lg-shadow: none;
  --button-ghost-bg: transparent;
  --button-ghost-pad-y: 12px;
  --button-ghost-pad-x: 6px;
  --pagination-item-size: 44px; /** Square page item, meets the 44px min touch target. */
  --pagination-shadow: none; /** Resting sticker shadow on each page item. */
  --card-shadow: none; /** Vary for rhythm, use shadow-accent in recipes for accent tiles, or shadow-violet. Never shadow-lime on paper or white. See docs/colour-rules.md. */
  --card-pad: 26px;
  --nav-gap: 20px;
  --nav-resources-card-shadow: none; /** Resting sticker shadow, light only; dark rests flat (flat-until-reveal). */
  --badge-pad-y: 6px;
  --badge-pad-x: 12px;
  --search-shadow: none; /** Resting sticker shadow on the field. */
  --search-pad-y: 14px;
  --search-pad-x: 18px;
  --search-pad-left: 48px; /** Icon clearance, left padding on the input. */
  --search-icon-left: 16px;
  --search-icon-size: 20px;
  --filter-chip-pad-y: 8px;
  --filter-chip-pad-x: 16px;
  --filter-chip-font-weight: 600;
  --filter-chip-shadow: none; /** Resting, flat until hover. */
  --section-tag-shadow: none;
  --section-tag-size: 40px; /** The sticker section marker. */
  --accordion-header-pad-y: 16px;
  --accordion-header-pad-x: 22px;
  --accordion-item-pad-y: 18px;
  --accordion-item-pad-x: 22px;
  --accordion-content-pad-y: 12px; /** Gap between trigger and answer. */
  --accordion-icon-size: 20px;
  --footer-desc-color: rgba(255, 255, 255, 0.7); /** Brand description on ink. */
  --footer-link-color: rgba(255, 255, 255, 0.82);
  --footer-sep-color: rgba(255, 255, 255, 0.6); /** Legal row separator bars (a vertical bar, never a dot). White at 60% on the ink band is 7.2:1. */
  --footer-copyright-color: rgba(255, 255, 255, 0.6);
  --testimonial-inner-max-width: 1120px;
  --testimonial-pad-y: 80px;
  --testimonial-pad-x: 40px;
  --testimonial-cite-pad-y: 22px; /** Space above author row. */
  --help-list-row-pad-y: 16px;
  --help-list-row-pad-x: 22px;
  --help-list-row-gap: 14px;
  --help-list-header-pad-y: 16px;
  --help-list-header-pad-x: 22px;
  --blog-card-shadow: none;
  --blog-card-cover-ratio: 1.7777777778; /** CSS aspect-ratio (16:9) for cover media. */
  --blog-card-cover-height: 120px; /** Gallery placeholder cover height. */
  --blog-card-content-pad: 20px;
  --featured-tag-pad-y: 4px;
  --featured-tag-pad-x: 12px;
  --featured-tag-radius: 8px;
  --page-hero-subtitle-size: 18px;
  --page-hero-pad-x: 40px; /** Horizontal inset, matches band inner padding. */
  --page-hero-chip-row-gap: 10px;
  --page-hero-search-max-width: 520px;
  --help-category-pad: 28px;
  --help-category-shadow: none; /** Resting ink offset on light, not accent lime. */
  --help-category-icon-size: 48px;
  --help-category-title-size: 18px;
  --help-category-grid-gap: 18px;
  --section-title-size-min: 28px; /** Fluid clamp floor, xs section tier. */
  --text-sticker-pad-x: 14px;
  --text-sticker-rotate: -1.5deg; /** Slight tilt, component exception. */
  --partners-inner-max-width: 1120px;
  --partners-intro-pad-top: 80px; /** Intro block top padding: matches testimonial/newsletter pad-y. */
  --partners-intro-pad-bottom: 80px; /** Section bottom padding, symmetric with intro-pad-top. */
  --partners-intro-pad-x: 40px;
  --partners-cta-margin-bottom: 40px; /** Space below demo CTA before track. */
  --partners-cta-shadow: none; /** Flat at rest on violet-900 band (flat-until-reveal); hover uses cta-shadow-hover. */
  --partners-track-border-top: none;
  --partners-track-pad-y: 18px;
  --partners-track-marquee-duration: 35s;
  --partners-logo-shadow: none; /** Flat at rest in both themes: violet-900 band on light, raised color.bg-tint on dark. */
  --partners-logo-pad-x: 26px;
  --partners-logo-height: 64px;
  --partners-logo-min-width: 200px;
  --partners-logo-img-max-height: 36px;
  --newsletter-cta-border-top: none;
  --newsletter-cta-inner-max-width: 1120px;
  --newsletter-cta-pad-y: 80px;
  --newsletter-cta-pad-x: 40px;
  --newsletter-cta-subtext-size: 18px;
  --newsletter-cta-label-pad-y: 4px;
  --newsletter-cta-label-pad-x: 12px;
  --newsletter-cta-label-radius: 8px;
  --newsletter-cta-label-gap: 8px;
  --newsletter-cta-label-margin-bottom: 18px;
  --newsletter-cta-action-pad-y: 16px;
  --newsletter-cta-action-pad-x: 28px;
  --newsletter-cta-action-radius: 14px;
  --newsletter-cta-action-font-size: 16px;
  --chat-bubble-user-radius: 12px 12px 2px 12px; /** Asymmetric, square bottom-right for outgoing bubble tail. */
  --chat-bubble-user-pad-y: 10px;
  --chat-bubble-user-pad-x: 14px;
  --chat-bubble-ai-radius: 2px 12px 12px 12px; /** Asymmetric, square top-left for incoming bubble tail. */
  --chat-bubble-ai-pad-y: 12px;
  --chat-bubble-ai-pad-x: 14px;
  --avatar-size: 32px;
  --card-chrome-pad-y: 10px;
  --card-chrome-pad-x: 16px;
  --card-chrome-gap: 8px;
  --card-chrome-dot-size: 10px;
  --step-number-font-size: 96px; /** Decorative only, outside the type scale. */
  --step-number-tracking: -0.04em; /** Tighter than ls.tight, component exception for large numerals. */
  --step-number-margin-bottom: -12px; /** Space before step title; negative pulls title toward the ghost numeral (was −20px in reference). */
  --progress-bar-height: 8px;
  --progress-bar-radius: 4px;
  --feature-card-shadow: none; /** Resting shadow on paper contexts only. On ink and brand-violet bands (.home-features) the tile is flat until hover and reveals shadow-accent-on-dark-hover. */
  --feature-card-pad: 28px;
  --pricing-card-pad: 26px;
  --pricing-card-shadow: none; /** Resting accent, pink on light, lime on dark. */
  --pricing-card-featured-shadow: none; /** Violet on violet fill, both themes. */
  --article-back-shadow: none; /** Outline rest, no resting shadow; dark mirror stays none. */
  --article-back-icon-size: 20px; /** 24px grid icon scaled to row. */
  --article-back-gutter-min-width: 1088px; /** Viewport min-width where nav pill is full 1040px and gutter back aligns to nav outer left. */
  --error-page-max-width: 620px;
  --error-page-body-max-width: 460px;
  --error-page-quote-max-width: 480px;
  --error-page-display-size-min: 120px; /** Fluid clamp floor, decorative status code, above display-xl. */
  --error-page-display-size-max: 200px;
  --error-page-display-line-height: 0.9;
  --error-page-body-size: 18px; /** Slightly above fs.body for error subcopy: component exception. */
  --viewport-bp-xs-max: 599px; /** xs tier max, small phones. */
  --viewport-bp-sm-max: 768px; /** sm tier max, large phones / small tablet portrait. */
  --viewport-bp-md-max: 904px; /** md tier max, tablet. */
  --viewport-bp-lg-max: 1239px; /** lg tier max, laptop. */
  --viewport-bp-lg-wide-min: 1240px; /** First width of lg-wide band (lg-max + 1). */
  --viewport-bp-below-xl: 1439px; /** Max width below xl desktop tier. */
  --viewport-bp-xl-min: 1440px; /** xl tier min, large desktop. */
  --viewport-pad-x-mobile: 24px; /** Page horizontal pad, xs and sm (≤768). */
  --viewport-pad-x-tablet: 32px; /** Page horizontal pad, md (769–904). */
  --viewport-pad-x-laptop: 64px; /** Page horizontal pad, lg (905–1239). */
  --viewport-pad-x-desktop: 144px; /** Page horizontal pad, lg-wide (1240–1439). */
  --viewport-pad-x-xl: 0px; /** Page horizontal pad, xl (≥1440). */
  --viewport-pad-y-section-tablet: 80px; /** Section vertical rhythm: md/lg. */
  --viewport-type-display-xl-xs: 40px;
  --viewport-type-display-xl-sm: 48px;
  --viewport-type-display-xl-fluid-preferred: 6vw; /** clamp middle for display-xl. */
  --viewport-type-display-xs: 32px;
  --viewport-type-display-sm: 40px;
  --viewport-type-display-fluid-preferred: 5vw;
  --viewport-type-section-xs: 28px;
  --viewport-type-section-sm: 32px;
  --viewport-type-section-fluid-preferred: 4vw;
  --viewport-type-h1-xs: 28px;
  --viewport-type-h1-sm: 32px;
  --viewport-type-h1-fluid-preferred: 3.5vw;
  --viewport-type-h2-xs: 22px;
  --viewport-type-h2-sm: 24px;
  --viewport-type-h2-fluid-preferred: 2.5vw;
  --viewport-type-h3-xs: 18px;
  --viewport-type-h3-sm: 18px;
  --viewport-type-quote-xs: 18px;
  --viewport-type-quote-sm: 18px;
  --viewport-type-body-xs: 14px; /** Web floor, never below 14px. */
  --viewport-icon-sm-xs: 16px;
  --viewport-icon-sm-sm: 20px;
  --viewport-icon-sm-md: 20px;
  --viewport-icon-md-xs: 20px;
  --viewport-icon-md-sm: 24px;
  --viewport-icon-md-md: 24px;
  --viewport-icon-lg-xs: 32px;
  --viewport-icon-lg-sm: 40px;
  --viewport-icon-lg-md: 48px;
  --violet: var(--violet-500); /** Convenience alias for the base brand colour. */
  --color-primary: var(--violet-500); /** Primary actions, brand surfaces: locked. */
  --color-primary-hover: var(--violet-700); /** Primary hover / pressed. */
  --color-primary-subtle: var(--violet-900); /** Soft violet fill on dark. */
  --color-primary-faint: var(--plum-950); /** Faint violet background on dark. */
  --color-primary-strong: var(--violet-900); /** Deepest violet for high-contrast text on tints. */
  --color-on-primary-muted: var(--violet-on-muted); /** Muted text on violet surfaces. */
  --color-accent: var(--lime); /** The one highlight moment per screen. */
  --color-accent-soft: var(--lime-soft); /** Gentle lime fill / gradient end. */
  --color-punctuation: var(--pink); /** Pink emphasis, tags, punctuation. */
  --color-punctuation-soft: var(--pink-soft); /** Soft pink fill. */
  --color-on-primary: var(--white); /** Text on violet. AA ✓. */
  --color-on-accent: var(--ink); /** Text on lime. AA ✓. */
  --color-on-punctuation: var(--ink); /** Text on pink. AA ✓. */
  --color-on-punctuation-soft: var(--pink-deep); /** Text on pink-soft. AA ✓. */
  --color-focus: var(--violet-bright); /** Focus ring colour on dark: violet-bright, 6.7:1 on the dark page (violet-500 is 2.4:1 there). */
  --color-disabled-bg: var(--neutral-850); /** Disabled background on dark. */
  --color-disabled-text: var(--neutral-550); /** Disabled text on dark. */
  --color-disabled-border: var(--neutral-800); /** Disabled border on dark. */
  --color-accent-shade: var(--lime-shade); /** Darker lime for inner borders on lime fills. */
  --color-punctuation-shade: var(--pink-shade); /** Darker pink for inner borders on pink fills. */
  --color-border-soft: var(--neutral-800); /** On dark surfaces a soft border is barely visible: correct. */
  --color-success: var(--green);
  --color-warning: var(--amber);
  --color-error: var(--red);
  --text: var(--neutral-100); /** ROLE, default body / heading text on dark. */
  --text-muted: var(--neutral-300); /** ROLE, secondary text on dark. */
  --text-subtle: var(--neutral-400); /** ROLE, muted / placeholder text on dark. AA on every dark ground: 6.1:1 on the page, 6.8:1 on surface, 4.6:1 on the raised band. */
  --paper: var(--violet-900); /** ROLE, page background on dark: violet-900. */
  --paper-tint: var(--plum-800); /** ROLE, tinted band ground on dark: raised violet, clearly lifted off the violet-900 page so stacked bands still alternate. Cards (surface) stay visible on it. */
  --surface: var(--neutral-900); /** ROLE, card / input / nav surface on dark. */
  --border-color: var(--neutral-450); /** ROLE, signature border colour on dark (light violet, replacing ink). 4.7:1 on the page, 5.3:1 on surface, 3.6:1 on the raised band. */
  --line: var(--neutral-800); /** ROLE, hairline dividers on dark. */
  --link: var(--violet-bright); /** ROLE, links / violet text / interactive icons on dark. */
  --success: var(--green); /** Status, success. */
  --warning: var(--amber); /** Status, warning. */
  --error: var(--red); /** Status, error. */
  --font-display: var(--ff-display); /** Heading / display family. */
  --font-body: var(--ff-body); /** Body / UI family. */
  --font-mono: var(--ff-mono); /** Monospace, code, metadata labels, blog card cover placeholders. */
  --border: var(--bw-default) solid var(--border-color); /** Signature border shorthand on dark: 2px solid light-violet. */
  --shadow: 4px 4px 0 var(--black); /** Default hard offset shadow on dark. */
  --shadow-sm: 3px 3px 0 var(--black); /** Small hard shadow on dark. */
  --shadow-lg: 5px 5px 0 var(--black); /** Large hard shadow on dark. */
  --shadow-lime: 4px 4px 0 var(--lime); /** Lime shadow, dark/ink surfaces; testimonials and footer social on dark. See docs/colour-rules.md. */
  --shadow-violet: 4px 4px 0 var(--violet-500); /** Violet-500 hard shadow, light surfaces only. On ink/dark grounds use accent, pink, or violet-bright focus: see docs/colour-rules.md. */
  --shadow-pink: 4px 4px 0 var(--pink); /** Pink hard shadow, accent rhythm on light/paper surfaces; also used on dark for variety. */
  --shadow-lime-hover: 6px 6px 0 var(--lime); /** Lime hover lift, dark surfaces only. Light-surface counterpart is shadow-pink-hover. */
  --shadow-pink-hover: 6px 6px 0 var(--pink); /** Pink hover lift, light-surface counterpart to shadow-lime-hover. */
  --shadow-mint: 4px 4px 0 var(--mint); /** Mint hard shadow, hover/accent on lime/accent bands. Contrasts lime ground; do not use on paper/surface. */
  --shadow-mint-hover: 6px 6px 0 var(--mint-shade); /** Mint hover lift on lime bands: pair with translate(-2px,-2px). */
  --shadow-accent: 4px 4px 0 var(--lime); /** Dark theme: accent shadow is lime on dark surfaces. Light theme uses pink: lime never on light grounds. */
  --shadow-accent-hover: 6px 6px 0 var(--lime); /** Dark theme accent hover lift: lime. */
  --shadow-accent-on-dark: 4px 4px 0 var(--lime); /** Ink/dark band accent, lime in both themes. */
  --shadow-accent-on-dark-hover: 6px 6px 0 var(--lime); /** Ink/dark band hover, lime in both themes. */
  --shadow-accent-on-lime: 4px 4px 0 var(--mint); /** Lime-band accent, mint in both themes (contrasts lime ground). Same as light. */
  --shadow-accent-on-lime-hover: 6px 6px 0 var(--mint-shade); /** Lime-band hover, mint in both themes. Never lime (invisible on lime bands). */
  --shadow-violet-sm: 3px 3px 0 var(--violet-500); /** Small violet offset shadow. Light and dark identical (violet is invariant). */
  --shadow-violet-lg: 5px 5px 0 var(--violet-500); /** Large violet offset shadow: hero highlight sticker. Light and dark identical. */
  --shadow-violet-hover: 6px 6px 0 var(--violet-500); /** Violet hover lift, completes the shadow scale (sm/default/lg/hover). Pair with translate(-2px,-2px). Light and dark identical (violet-500 is invariant). */
  --button-radius: var(--r-md);
  --button-shadow-active: 1px 1px 0 var(--lime); /** Press, paired with translate(2px,2px). */
  --button-sm-font-size: var(--fs-small);
  --button-sm-radius: var(--r-sm);
  --pagination-gap: var(--s-2); /** Space between page items. */
  --pagination-radius: var(--r-sm);
  --pagination-margin-top: var(--s-6); /** Space above pagination when following a CTA or FAQ prompt. */
  --pagination-shadow-active: 1px 1px 0 var(--black); /** Press, paired with translate(2px,2px). */
  --pagination-font-size: var(--fs-small);
  --pagination-font-weight: var(--fw-label); /** Bold page numbers. */
  --pagination-nav-pad-y: var(--s-3); /** Prev / Next vertical padding. */
  --pagination-nav-pad-x: var(--s-4); /** Prev / Next horizontal padding. */
  --card-radius: var(--r-lg);
  --nav-radius: var(--r-lg);
  --nav-resources-card-tint-violet-bg: var(--plum-900); /** Faint violet tint (Product classes, Newsletter). Dark: plum-900, primary-faint's dark value is a page-ground wash and reads as dark-on-dark as a fill. */
  --nav-resources-card-tint-violet-strong-bg: var(--plum-800); /** Stronger violet tint (Community). Dark: plum-800, never violet-900 (= page bg). */
  --badge-radius: var(--r-sm);
  --badge-border: var(--bw-hairline) solid var(--border-color); /** 1.5px ink border, lighter than the 2px default. */
  --input-radius: var(--r-md); /** Matches r-md (12px). */
  --input-focus-shadow: 4px 4px 0 var(--violet-bright); /** Violet focus ring. */
  --search-radius: var(--r-pill);
  --search-focus-shadow: 4px 4px 0 var(--violet-bright);
  --filter-chip-radius: var(--r-md);
  --filter-chip-font-size: var(--fs-small);
  --filter-chip-shadow-active: 1px 1px 0 var(--black); /** Press, paired with translate(2px,2px). */
  --filter-chip-active-bg: var(--plum-800);
  --section-tag-radius: var(--r-md);
  --accordion-radius: var(--r-lg);
  --faq-header-pad-y: var(--accordion-header-pad-y);
  --faq-header-pad-x: var(--accordion-header-pad-x);
  --faq-item-pad-y: var(--accordion-item-pad-y);
  --faq-item-pad-x: var(--accordion-item-pad-x);
  --faq-content-pad-y: var(--accordion-content-pad-y);
  --faq-icon-size: var(--accordion-icon-size);
  --footer-bg: var(--ink); /** Full-bleed ink band, do not use color.bg (flips on dark). */
  --footer-text: var(--white);
  --footer-col-title-color: var(--lime); /** Column labels, the footer's lime moment. Never body text. */
  --footer-link-hover-color: var(--white);
  --footer-social-bg: var(--white); /** Always-light social tiles on the ink band: do not use color.surface. */
  --footer-social-color: var(--ink); /** Icon stroke (currentColor): pinned so theme text colour never bleeds in. */
  --footer-social-border: var(--bw-default) solid var(--ink); /** Ink border on the white tile: invariant (mirror override keeps ink on dark). */
  --testimonial-bg: var(--ink); /** Full-bleed dark section: do not use color.bg. */
  --testimonial-text: var(--white);
  --testimonial-mark-size: var(--fs-h1); /** Opening quotation glyph: h1 scale. */
  --testimonial-text-size: var(--fs-quote);
  --testimonial-text-weight: var(--fw-quote);
  --testimonial-text-line-height: var(--lh-quote);
  --help-list-radius: var(--r-lg);
  --help-list-row-radius: var(--r-sm); /** Icon tile corners. */
  --help-list-row-hover-bg: var(--neutral-850); /** Row hover wash. Dark: neutral-850, primary-faint's dark value ≈ surface, hover would be invisible. */
  --blog-card-radius: var(--r-lg);
  --blog-card-avatar-bg: var(--plum-800); /** Meta avatar dot. Dark: plum-800, primary-subtle's dark value equals the page bg. */
  --blog-card-meta-size: var(--fs-small);
  --page-hero-title-size: var(--fs-h1);
  --page-hero-title-weight: var(--fw-h1);
  --page-hero-title-lh: var(--lh-h1);
  --page-hero-pad-top: var(--s-8);
  --page-hero-pad-bottom: var(--s-7);
  --page-hero-band-from: var(--plum-950); /** Listing hero gradient start: approved brand wash. */
  --help-category-radius: var(--r-lg);
  --help-category-icon-radius: var(--r-md);
  --help-section-title-size: var(--fs-h2);
  --help-section-title-weight: var(--fw-h2);
  --help-section-title-margin-bottom: var(--s-6);
  --listing-filter-empty-pad-y: var(--s-8);
  --section-title-size: var(--fs-section); /** Desktop section headline. */
  --section-title-weight: var(--fw-section);
  --section-title-line-height: var(--lh-section);
  --section-title-tracking: var(--ls-tight); /** Matches .fd / ls.tight on display headings. */
  --text-sticker-radius: var(--r-md);
  --partners-text: var(--white);
  --partners-gap: var(--s-6); /** Stack gap, title, sub, CTA. */
  --partners-cta-border: var(--bw-default) solid var(--ink);
  --partners-track-marquee-gap: var(--s-4);
  --partners-logo-bg: var(--white);
  --partners-logo-border: var(--bw-default) solid var(--ink);
  --partners-logo-shadow-hover: 6px 6px 0 var(--lime); /** Hover lift on the individually-hovered tile: pairs with translate(-2px,-2px). Lime contrasts the white fill and both grounds (violet-900 light, raised violet dark). */
  --partners-logo-shadow-active: 1px 1px 0 var(--lime); /** Press, pairs with translate(2px,2px). */
  --partners-logo-radius: var(--r-md);
  --partners-logo-gap: var(--s-4); /** Space between tiles in the track. */
  --newsletter-cta-gap: var(--s-6); /** Space between copy block and CTA. */
  --newsletter-cta-headline-size-min: var(--section-title-size-min);
  --newsletter-cta-label-font-size: var(--fs-label);
  --newsletter-cta-action-shadow-active: 1px 1px 0 var(--ink); /** Press offset on lime band: ink, not lime. */
  --chat-bubble-user-text: var(--white);
  --chat-bubble-user-font-size: var(--fs-small);
  --chat-bubble-ai-font-size: var(--fs-small);
  --avatar-text: var(--white);
  --avatar-font-size: var(--fs-small);
  --card-chrome-bg: var(--violet-50);
  --card-chrome-border-bottom: var(--bw-default) solid var(--neutral-200);
  --card-chrome-dot-radius: var(--r-pill);
  --card-chrome-dot-red-bg: var(--red); /** Close, left traffic light (status red). */
  --card-chrome-dot-red-border: var(--red-shade);
  --card-chrome-dot-yellow-bg: var(--amber); /** Minimise, middle traffic light (status amber). */
  --card-chrome-dot-yellow-border: var(--amber-shade);
  --card-chrome-dot-green-bg: var(--green); /** Maximise, right traffic light (status green). */
  --card-chrome-dot-green-border: var(--green-shade);
  --card-chrome-label-color: var(--neutral-600);
  --card-chrome-label-size: var(--fs-label);
  --step-number-color: var(--plum-600); /** Light: violet-100 ghost. Dark: violet-900 ghost. Both are fade effects. */
  --step-number-font-weight: var(--fw-display);
  --step-number-line-height: var(--lh-display);
  --feature-card-bg: var(--white);
  --feature-card-text: var(--ink); /** Title and body text on the card. Fixed ink in both themes: the fill stays white in dark, so the flipping text role would be near-white on white. 19.2:1 on white. */
  --feature-card-text-muted: var(--neutral-600); /** Secondary text on the card. Fixed in both themes for the same reason as text. 7.1:1 on white. */
  --feature-card-radius: var(--r-lg);
  --feature-card-border: var(--bw-default) solid var(--ink); /** Soft purple border on light. Dark mirror: ink border on the light island (same as partners-logo). */
  --pricing-card-radius: var(--r-lg);
  --article-back-pad-y: var(--button-sm-pad-y);
  --article-back-pad-x: var(--button-sm-pad-x);
  --article-back-font-size: var(--fs-small);
  --article-back-font-weight: var(--fw-label); /** Bold sticker ink. */
  --article-back-gap: var(--s-1);
  --error-page-pad-y: var(--s-8); /** Vertical inset in page column. */
  --error-page-pad-x: var(--s-5);
  --error-page-gap: var(--s-4); /** Stack rhythm between badge, display, title, body. */
  --error-page-quote-margin-bottom: var(--s-7); /** Space before CTA row. */
  --error-page-actions-gap: var(--s-3);
  --error-page-display-weight: var(--fw-display);
  --error-page-display-tracking: var(--ls-tight);
  --error-page-display-margin-top: var(--s-6);
  --error-page-display-margin-bottom: var(--s-2);
  --error-page-title-margin-top: var(--s-3);
  --error-page-body-margin-bottom: var(--s-7);
  --error-page-body-line-height: var(--lh-body);
  --error-page-quote-radius: var(--r-lg);
  --error-page-quote-pad-y: var(--s-5);
  --error-page-quote-pad-x: var(--s-5);
  --error-page-quote-text-size: var(--fs-quote);
  --error-page-quote-text-weight: var(--fw-quote);
  --error-page-quote-text-line-height: var(--lh-quote);
  --error-page-quote-cite-margin-top: var(--s-4);
  --error-page-quote-name-size: var(--fs-small);
  --error-page-quote-role-size: var(--fs-label);
  --viewport-pad-y-section-mobile: var(--s-8); /** Section vertical rhythm: xs/sm. */
  --viewport-pad-y-section-desktop: var(--s-9); /** Section vertical rhythm: lg-wide/xl. */
  --viewport-type-display-xl-max: var(--fs-display-xl);
  --viewport-type-display-max: var(--fs-display);
  --viewport-type-section-max: var(--fs-section);
  --viewport-type-h1-max: var(--fs-h1);
  --viewport-type-h2-max: var(--fs-h2);
  --viewport-type-h3-md: var(--fs-h3);
  --viewport-type-quote-md: var(--fs-quote);
  --viewport-type-body-sm: var(--fs-body);
  --viewport-type-body-md: var(--fs-body);
  --viewport-type-small-xs: var(--fs-label);
  --viewport-type-small-sm: var(--fs-small);
  --viewport-type-small-md: var(--fs-small);
  --viewport-type-label-size: var(--fs-label); /** Fixed at all tiers. */
  --color-link: var(--link); /** Alias of the link role, inline links, violet text, interactive icons (not fills). */
  --color-text: var(--text); /** Alias of the text role, default body / heading text. */
  --color-text-muted: var(--text-muted); /** Alias of the text-muted role: secondary text. */
  --color-text-subtle: var(--text-subtle); /** Alias of the text-subtle role: muted / placeholder text, AA on paper and surface in both themes. */
  --color-bg: var(--paper); /** Alias of the paper role: page background. */
  --color-surface: var(--surface); /** Alias of the surface role: card / input surface. */
  --color-bg-tint: var(--paper-tint); /** Alias of the paper-tint role: the alternate section ground to bg. Steps from the page in BOTH themes. Use for stacked full-bleed bands; never primary-subtle (equals the dark page). See docs/colour-rules.md. */
  --color-border: var(--border-color); /** Alias of the border-color role: the signature border colour. */
  --color-divider: var(--line); /** Alias of the line role, hairline dividers. */
  --button-border: var(--border);
  --button-shadow-hover: var(--shadow-lime-hover); /** Hover lift, paired with translate(-2px,-2px). */
  --button-primary-bg: var(--color-primary);
  --button-primary-text: var(--color-on-primary);
  --button-secondary-bg: var(--color-accent);
  --button-secondary-text: var(--color-on-accent);
  --button-disabled-bg: var(--color-disabled-bg);
  --button-disabled-text: var(--color-disabled-text);
  --button-disabled-border: var(--color-disabled-border);
  --button-outline-border: var(--border);
  --pagination-border: var(--border);
  --pagination-shadow-hover: var(--shadow-accent-hover); /** Hover lift, paired with translate(-2px,-2px). Violet accent on page tiles. */
  --pagination-active-bg: var(--color-primary); /** Current page, violet fill. */
  --pagination-active-text: var(--color-on-primary); /** Current page, white text. */
  --card-border: var(--border);
  --card-shadow-hover: var(--shadow-accent-hover); /** Card hover lift, theme-aware pink (light) / lime (dark). */
  --card-featured-bg: var(--color-primary);
  --card-featured-text: var(--color-on-primary);
  --nav-border: var(--border);
  --nav-shadow: var(--shadow-accent);
  --nav-resources-card-hero-bg: var(--color-accent-soft); /** Help Centre hero card, lime-soft in both themes. */
  --nav-resources-card-tint-pink-bg: var(--color-punctuation-soft); /** Pink tint (FAQ), pink-soft in both themes; chrome uses on-punctuation-soft. */
  --nav-resources-card-shadow-hover: var(--shadow-lime-hover); /** Hover lift on tint cards. Light: ink. Dark: lime accent reveal, contrasts all tint fills. */
  --nav-resources-card-hero-shadow-hover: var(--shadow-accent-on-lime-hover); /** Hover lift on the lime-soft hero. Dark: pink (shadow-accent-on-lime-hover): lime shadow would vanish on lime fill. */
  --badge-violet-bg: var(--color-primary);
  --badge-violet-text: var(--color-on-primary);
  --badge-lime-bg: var(--color-accent);
  --badge-lime-text: var(--color-on-accent);
  --badge-pink-bg: var(--color-punctuation-soft);
  --badge-pink-text: var(--color-on-punctuation-soft);
  --input-border: var(--border);
  --search-border: var(--border);
  --filter-chip-border: var(--border);
  --filter-chip-shadow-hover: var(--shadow-accent-hover); /** Accent lift on light surfaces: paired with translate(-2px,-2px). */
  --section-tag-bg: var(--color-accent);
  --section-tag-border: var(--border);
  --section-tag-shadow-hover: var(--shadow-violet-hover); /** Hover lift on lime fill: violet contrasts fill (dark/ink bands and eyebrow markers). */
  --section-tag-shadow-active: var(--shadow-violet-sm); /** Press, pairs with translate(2px,2px). */
  --accordion-border: var(--border);
  --faq-radius: var(--accordion-radius);
  --testimonial-avatar-bg: var(--color-accent); /** Author avatar dot on the ink band: lime moment; no arbitrary inline colours. */
  --testimonial-border-top: var(--border); /** Separates the band from content above. */
  --testimonial-role-color: var(--color-on-primary-muted); /** Author title on ink, not color.text-subtle (light-mode ink gray). */
  --help-list-border: var(--border);
  --help-list-row-shadow: var(--shadow-sm);
  --blog-card-border: var(--border);
  --featured-tag-bg: var(--color-accent);
  --featured-tag-text: var(--color-on-accent);
  --featured-tag-border: var(--badge-border);
  --page-hero-band-via: var(--paper); /** Listing hero gradient mid (paper). */
  --page-hero-band-to: var(--surface); /** Listing hero gradient end: gentle lime. */
  --page-hero-band-border: var(--border); /** Bottom edge of listing hero band. */
  --help-category-border: var(--border);
  --help-category-shadow-hover: var(--shadow-accent-hover); /** Hover lift paired with translate(-2px,-2px). */
  --text-sticker-bg: var(--color-accent);
  --text-sticker-border: var(--border);
  --text-sticker-shadow: var(--shadow-pink-hover); /** Light: violet-lg offset. Dark mirror: pink-hover offset on lime fill. */
  --partners-subtext: var(--color-on-primary-muted);
  --partners-cta-bg: var(--color-accent); /** Primary action on the partners intro (violet-900 light / raised violet dark): lime fill reads clearly above white partners-logo tiles (supporting) without sharing their white/ink/lime recipe. */
  --partners-cta-text: var(--color-on-accent);
  --partners-cta-shadow-hover: var(--shadow-violet-hover); /** Reveal on hover, violet contrasts lime fill; lime shadow would not. */
  --partners-cta-shadow-active: var(--shadow-violet-sm);
  --newsletter-cta-bg: var(--color-accent);
  --newsletter-cta-headline-size-max: var(--section-title-size);
  --newsletter-cta-headline-color: var(--color-on-accent);
  --newsletter-cta-subtext-color: var(--color-primary-strong);
  --newsletter-cta-label-border: var(--border);
  --newsletter-cta-label-shadow: var(--shadow-sm);
  --newsletter-cta-action-bg: var(--color-primary);
  --newsletter-cta-action-text: var(--color-on-primary);
  --newsletter-cta-action-border: var(--border);
  --newsletter-cta-action-shadow: var(--shadow); /** Resting ink/black sticker on lime band: contrasts ground and violet fill. */
  --newsletter-cta-action-shadow-hover: var(--shadow-accent-on-lime-hover); /** Mint hover on lime band, never button.shadow-hover (dark → lime, invisible). */
  --chat-bubble-user-bg: var(--color-primary); /** Near-black ink on light; overridden to #7100FF (violet) in dark via generate-dark-mirror. */
  --chat-bubble-ai-border: var(--border);
  --chat-bubble-ai-shadow: var(--shadow-sm);
  --avatar-bg: var(--color-primary);
  --avatar-border: var(--border);
  --avatar-font: var(--font-display);
  --step-number-font: var(--font-display);
  --progress-bar-track-bg: var(--color-primary-subtle);
  --progress-bar-fill-bg: var(--color-primary);
  --pricing-card-border: var(--border);
  --pricing-card-shadow-hover: var(--shadow-accent-hover); /** Hover lift paired with translate(-2px,-2px). */
  --pricing-card-featured-bg: var(--color-primary);
  --pricing-card-featured-text: var(--color-on-primary);
  --pricing-card-featured-shadow-hover: var(--shadow-accent-hover); /** Featured hover lift. */
  --article-back-radius: var(--button-sm-radius);
  --article-back-shadow-hover: var(--shadow-accent-on-dark-hover); /** Hover lift, paired with translate(-2px,-2px); matches btn--outline. */
  --article-back-shadow-active: var(--button-shadow-active); /** Press, paired with translate(2px,2px). */
  --error-page-display-shadow: var(--shadow-pink-hover); /** Hard pink offset on page ground, never lime on paper. Same in dark (pink reads on dark bg). */
  --error-page-quote-border: var(--border);
  --error-page-quote-shadow: var(--shadow-accent); /** Sticker card on page ground: theme-aware pink/lime role. */
  --button-outline-bg: var(--color-surface);
  --button-outline-text: var(--color-text);
  --button-ghost-text: var(--color-link);
  --pagination-bg: var(--color-surface); /** Inactive page item fill. */
  --pagination-text: var(--color-text); /** Inactive page item ink. */
  --pagination-nav-text: var(--color-link); /** Prev / Next link colour. */
  --card-bg: var(--color-surface);
  --nav-bg: var(--color-surface);
  --nav-resources-card-icon-color: var(--color-link); /** Line icons on tint cards. Dark: violet-bright (interactive icon role). */
  --filter-chip-bg: var(--color-surface);
  --filter-chip-text: var(--color-text);
  --filter-chip-active-text: var(--color-link);
  --accordion-bg: var(--color-surface);
  --faq-border: var(--accordion-border);
  --help-list-bg: var(--color-surface);
  --page-hero-subtitle-color: var(--color-text-muted);
  --help-category-bg: var(--color-surface);
  --help-category-count-color: var(--color-text-subtle);
  --listing-filter-empty-color: var(--color-text-muted);
  --text-sticker-color: var(--color-surface); /** Label on lime fill. Light: ink. Dark mirror: color.surface for theme integration. */
  --partners-bg: var(--color-bg-tint); /** Deep violet on light; dark → color.bg-tint (raised) so the band stays distinct from the violet-900 page. */
  --partners-track-bg: var(--color-bg-tint); /** Same ground as partners.bg: dark mirror re-points to color.bg-tint. */
  --newsletter-cta-label-bg: var(--color-surface);
  --newsletter-cta-label-text: var(--color-text);
  --chat-bubble-ai-bg: var(--color-surface);
  --chat-bubble-ai-text: var(--color-text);
  --pricing-card-bg: var(--color-surface);
  --article-back-text-color-hover: var(--color-link); /** Dark mirror overrides to #B794FF. */
  --article-back-border: var(--button-outline-border);
  --error-page-display-color: var(--color-text);
  --error-page-body-color: var(--color-text-muted);
  --error-page-quote-bg: var(--color-surface);
  --error-page-quote-role-color: var(--color-text-subtle);
  --faq-bg: var(--accordion-bg);
  --article-back-bg: var(--button-outline-bg);
  --article-back-text-color: var(--button-outline-text);
}