/**
 * 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.
 */

:root, [data-theme="light"] {
  --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 — default text and the signature 2px borders. */
  --ink-50: #5B5470; /** Secondary text. */
  --ink-30: #8079A0; /** Muted / placeholder text. */
  --line: #E7E2F2; /** Hairline dividers inside cards. */
  --paper: #FBFAFF; /** Page background. */
  --surface: #FFFFFF; /** Card / input surface. */
  --white: #FFFFFF; /** Pure white — text on violet. */
  --grey-fill: #F1EEF7; /** Off-system grey — disabled background only. */
  --grey-text: #A39CB5; /** Off-system grey — disabled text only. */
  --grey-border: #C9C3D6; /** Off-system grey — disabled border only. */
  --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;
  --color-border-soft: #4A3D66; /** Deliberate cross-use of the dark-mode border tone on light surfaces — product feature cards only. Overridden to divider-dark in dark. */
  --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-pad-y: 12px;
  --button-pad-x: 26px;
  --button-sm-pad-y: 8px;
  --button-sm-pad-x: 16px;
  --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-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. */
  --card-pad: 26px;
  --nav-gap: 20px;
  --badge-pad-y: 6px;
  --badge-pad-x: 12px;
  --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-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.4); /** Legal row separator dots. */
  --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-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-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 — theme-invariant violet-900 band (same as dark canonical). */
  --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-pad: 28px;
  --pricing-card-pad: 26px;
  --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, links, brand surfaces. */
  --color-primary-hover: var(--violet-700); /** Primary hover / pressed. */
  --color-primary-subtle: var(--violet-100); /** Soft violet fills / chips. */
  --color-primary-faint: var(--violet-50); /** Faint violet backgrounds, gradient start. */
  --color-primary-strong: var(--violet-900); /** Deepest violet for high-contrast text on tints. */
  --color-link: var(--violet-500); /** Inline links, violet text, interactive icons (not fills). */
  --color-on-primary-muted: var(--violet-on-muted); /** Muted text on violet surfaces. */
  --color-accent: var(--lime); /** The one highlight moment per screen. Never body text. */
  --color-accent-soft: var(--lime-soft); /** Gentle lime fill / gradient end. */
  --color-punctuation: var(--pink); /** Pink emphasis — tags, punctuation, sparing. */
  --color-punctuation-soft: var(--pink-soft); /** Soft pink fill. */
  --color-text: var(--ink); /** Default body / heading text. */
  --color-text-muted: var(--ink-50); /** Secondary text. */
  --color-text-subtle: var(--ink-30); /** Muted / placeholder text. */
  --color-on-primary: var(--white); /** Text on violet. AA ✓. */
  --color-on-accent: var(--ink); /** Text on lime. AA ✓. Never violet text on lime. */
  --color-on-punctuation: var(--ink); /** Text on pink. AA ✓. */
  --color-on-punctuation-soft: var(--pink-deep); /** Text on pink-soft. AA ✓. */
  --color-bg: var(--paper); /** Page background. */
  --color-surface: var(--surface); /** Card / input surface. */
  --color-border: var(--ink); /** The signature ink border colour. */
  --color-divider: var(--line); /** Hairline dividers. */
  --color-focus: var(--violet-500); /** Focus ring colour (violet focus shadow). */
  --color-disabled-bg: var(--grey-fill); /** Disabled background. */
  --color-disabled-text: var(--grey-text); /** Disabled text. */
  --color-disabled-border: var(--grey-border); /** Disabled border. */
  --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-success: var(--green);
  --color-warning: var(--amber);
  --color-error: var(--red);
  --success: var(--green); /** Status — success. Also exposed as color-success. */
  --warning: var(--amber); /** Status — warning. Also exposed as color-warning. */
  --error: var(--red); /** Status — error. Also exposed as color-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(--ink); /** Signature border shorthand: 2px solid ink. */
  --shadow: 4px 4px 0 var(--ink); /** Default hard offset shadow. NEVER blurred. */
  --shadow-sm: 3px 3px 0 var(--ink); /** Small hard shadow. */
  --shadow-lg: 5px 5px 0 var(--ink); /** Large hard shadow. */
  --shadow-lime: 4px 4px 0 var(--lime); /** Lime hard shadow — dark/ink surfaces ONLY (e.g. testimonials, footer social tiles). On paper, surface, or white it reads as dirty yellow. For accent shadow rhythm on light backgrounds use shadow-pink instead. See docs/colour-rules.md. */
  --shadow-violet: 4px 4px 0 var(--violet-500); /** Violet-500 hard shadow — light surfaces only (cards, input focus on light). On dark/ink use accent 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. Preferred over shadow-lime for card grid variety on white or paper backgrounds. See docs/colour-rules.md. */
  --shadow-lime-hover: 6px 6px 0 var(--lime); /** Lime hover lift — dark/ink surfaces only. Footer social icon tiles, theme toggle on dark. Light-surface counterpart is shadow-pink-hover. */
  --shadow-pink-hover: 6px 6px 0 var(--pink); /** Pink hover lift — light/paper surface counterpart to shadow-lime-hover. Pairs with shadow-pink resting state on cards/tiles sitting on paper or white. */
  --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-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-hover: 6px 6px 0 var(--ink); /** Hover lift — paired with translate(-2px,-2px). */
  --button-shadow-active: 1px 1px 0 var(--ink); /** 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(--ink); /** 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);
  --badge-radius: var(--r-sm);
  --badge-border: var(--bw-hairline) solid var(--ink); /** 1.5px ink border — lighter than the 2px default. */
  --input-radius: var(--r-md); /** Matches r-md (12px). */
  --search-radius: var(--r-pill);
  --filter-chip-radius: var(--r-md);
  --filter-chip-font-size: var(--fs-small);
  --filter-chip-shadow-active: 1px 1px 0 var(--ink); /** Press — paired with translate(2px,2px). */
  --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. */
  --blog-card-radius: var(--r-lg);
  --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);
  --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-bg: var(--violet-900);
  --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-bg: var(--violet-900);
  --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). Ground (violet-900) and fill (white) are theme-invariant, so lime contrasts both in light and 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-bg: var(--ink); /** Near-black ink on light; overridden to #7100FF (violet) in dark via generate-dark-mirror. */
  --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-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-size: var(--fs-label);
  --step-number-font-weight: var(--fw-display);
  --step-number-line-height: var(--lh-display);
  --feature-card-radius: var(--r-lg);
  --feature-card-border: var(--bw-default) solid var(--color-border-soft); /** 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. */
  --shadow-accent: var(--shadow-pink); /** Theme-aware accent shadow for cards/tiles/buttons — use this in recipes, not shadow-pink or shadow-lime. Light: pink only (lime/yellow never on paper/surface). Dark theme mirror: lime. See docs/colour-rules.md. */
  --shadow-accent-hover: var(--shadow-pink-hover); /** Theme-aware accent hover lift — pair with translate(-2px,-2px). Light: pink-hover. Dark mirror: lime-hover. Never reference shadow-lime-hover in component code except via this role or shadow-accent-on-dark-hover. */
  --shadow-accent-on-dark: var(--shadow-lime); /** Accent shadow on ink/dark bands in light mode (footer, testimonial tiles). Lime only — never use on paper/surface. Same in dark theme. */
  --shadow-accent-on-dark-hover: var(--shadow-lime-hover); /** Hover lift for elements on ink/dark bands. Lime only. */
  --shadow-accent-on-lime: var(--shadow-mint); /** Accent shadow for stickers on lime/accent bands (newsletter CTA resting is ink — hover uses this role). Mint in both themes — contrasts lime ground AND typical violet fills. See docs/colour-rules.md triad rule. */
  --shadow-accent-on-lime-hover: var(--shadow-mint-hover); /** Hover lift on lime/accent bands — pair with translate(-2px,-2px). Mint in both themes. Do not use button.shadow-hover here (dark maps that to lime). */
  --button-border: var(--border);
  --button-shadow: var(--shadow);
  --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-sm-shadow: var(--shadow-sm);
  --button-lg-shadow: var(--shadow-lg);
  --button-outline-bg: var(--color-surface);
  --button-outline-text: var(--color-text);
  --button-outline-border: var(--border);
  --button-ghost-text: var(--color-link);
  --pagination-border: var(--border);
  --pagination-shadow: var(--shadow-sm); /** Resting sticker shadow on each page item. */
  --pagination-shadow-hover: var(--shadow-violet-hover); /** Hover lift — paired with translate(-2px,-2px). Violet accent on page tiles. */
  --pagination-bg: var(--color-surface); /** Inactive page item fill. */
  --pagination-text: var(--color-text); /** Inactive page item ink. */
  --pagination-active-bg: var(--color-primary); /** Current page — violet fill. */
  --pagination-active-text: var(--color-on-primary); /** Current page — white text. */
  --pagination-nav-text: var(--color-link); /** Prev / Next link colour. */
  --card-bg: var(--color-surface);
  --card-border: var(--border);
  --card-shadow: var(--shadow); /** 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-featured-bg: var(--color-primary);
  --card-featured-text: var(--color-on-primary);
  --nav-bg: var(--color-surface);
  --nav-border: var(--border);
  --nav-shadow: var(--shadow);
  --nav-resources-card-hero-bg: var(--color-accent-soft); /** Help Centre hero card — lime-soft in both themes. */
  --nav-resources-card-tint-violet-bg: var(--color-primary-faint); /** Faint violet tint (Product classes, Newsletter). Dark: violet-tint-soft-dark — 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(--color-primary-subtle); /** Stronger violet tint (Community). Dark: violet-tint-dark — never violet-900 (= page bg). */
  --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-icon-color: var(--color-text); /** Line icons on tint cards. Dark: violet-bright (interactive icon role). */
  --nav-resources-card-shadow: var(--shadow-sm); /** Resting sticker shadow — light only; dark rests flat (flat-until-reveal). */
  --nav-resources-card-shadow-hover: var(--shadow-lg); /** Hover lift on tint cards. Light: ink. Dark: lime accent reveal — contrasts all tint fills. */
  --nav-resources-card-hero-shadow-hover: var(--shadow-lg); /** 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);
  --input-focus-shadow: var(--shadow-violet); /** Violet focus ring. */
  --search-border: var(--border);
  --search-shadow: var(--shadow); /** Resting sticker shadow on the field. */
  --search-focus-shadow: var(--shadow-violet);
  --filter-chip-border: var(--border);
  --filter-chip-bg: var(--color-surface);
  --filter-chip-text: var(--color-text);
  --filter-chip-active-bg: var(--color-primary-subtle);
  --filter-chip-active-text: var(--color-primary);
  --section-tag-bg: var(--color-accent);
  --section-tag-border: var(--border);
  --section-tag-shadow: var(--shadow-sm);
  --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);
  --accordion-bg: var(--color-surface);
  --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-bg: var(--color-surface);
  --help-list-row-shadow: var(--shadow-sm);
  --help-list-row-hover-bg: var(--color-primary-faint); /** Row hover wash. Dark: surface-2-dark — primary-faint's dark value ≈ surface, hover would be invisible. */
  --blog-card-border: var(--border);
  --blog-card-shadow: var(--shadow);
  --blog-card-avatar-bg: var(--color-primary-subtle); /** Meta avatar dot. Dark: violet-tint-dark — primary-subtle's dark value equals the page bg. */
  --featured-tag-bg: var(--color-accent);
  --featured-tag-text: var(--color-on-accent);
  --featured-tag-border: var(--badge-border);
  --page-hero-subtitle-color: var(--color-text-muted);
  --page-hero-band-from: var(--color-primary-subtle); /** Listing hero gradient start — approved brand wash. */
  --page-hero-band-via: var(--color-bg); /** Listing hero gradient mid (paper). */
  --page-hero-band-to: var(--color-accent-soft); /** Listing hero gradient end — gentle lime. */
  --page-hero-band-border: var(--border); /** Bottom edge of listing hero band. */
  --help-category-bg: var(--color-surface);
  --help-category-border: var(--border);
  --help-category-shadow: var(--shadow); /** Resting ink offset on light — not accent lime. */
  --help-category-shadow-hover: var(--shadow-lg); /** Hover lift paired with translate(-2px,-2px). */
  --help-category-count-color: var(--color-text-subtle);
  --listing-filter-empty-color: var(--color-text-muted);
  --text-sticker-bg: var(--color-accent);
  --text-sticker-color: var(--color-on-accent); /** Label on lime fill. Light: ink. Dark mirror: color.surface for theme integration. */
  --text-sticker-border: var(--border);
  --text-sticker-shadow: var(--shadow-violet-lg); /** 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 theme-invariant violet-900 intro — 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-bg: var(--color-surface);
  --newsletter-cta-label-text: var(--color-text);
  --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. */
  --chat-bubble-ai-bg: var(--color-surface);
  --chat-bubble-ai-text: var(--color-text);
  --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);
  --card-chrome-bg: var(--color-primary-faint);
  --card-chrome-border-bottom: var(--border);
  --card-chrome-label-color: var(--color-text-muted);
  --step-number-color: var(--color-primary-subtle); /** Light: violet-100 ghost. Dark: violet-900 ghost. Both are fade effects. */
  --step-number-font: var(--font-display);
  --progress-bar-track-bg: var(--color-primary-subtle);
  --progress-bar-fill-bg: var(--color-primary);
  --feature-card-bg: var(--color-surface);
  --feature-card-shadow: var(--shadow-violet); /** Default on light ink bands and paper contexts. */
  --pricing-card-bg: var(--color-surface);
  --pricing-card-border: var(--border);
  --pricing-card-featured-bg: var(--color-primary);
  --pricing-card-featured-text: var(--color-on-primary);
  --pricing-card-featured-shadow: var(--shadow-violet); /** Violet on violet fill — both themes. */
  --pricing-card-featured-shadow-hover: var(--shadow-violet-lg); /** Featured hover lift. */
  --article-back-text-color-hover: var(--color-primary); /** Dark mirror overrides to #7100FF. */
  --article-back-radius: var(--button-sm-radius);
  --article-back-shadow-hover: var(--shadow); /** 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-color: var(--color-text);
  --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-body-color: var(--color-text-muted);
  --error-page-quote-bg: var(--color-surface);
  --error-page-quote-border: var(--border);
  --error-page-quote-role-color: var(--color-text-subtle);
  --card-shadow-hover: var(--shadow-accent-hover); /** Card hover lift — theme-aware pink (light) / lime (dark). */
  --filter-chip-shadow-hover: var(--shadow-accent-hover); /** Accent lift on light surfaces — paired with translate(-2px,-2px). */
  --faq-border: var(--accordion-border);
  --faq-bg: var(--accordion-bg);
  --newsletter-cta-action-shadow-hover: var(--shadow-accent-on-lime-hover); /** Mint hover on lime band — never button.shadow-hover (dark → lime, invisible). */
  --feature-card-shadow-alt: var(--shadow-accent); /** Alternate tile in a grid (even columns). Theme-aware pink/lime. */
  --pricing-card-shadow: var(--shadow-accent); /** Resting accent — pink on light, lime on dark. */
  --pricing-card-shadow-hover: var(--shadow-accent-hover); /** Hover lift paired with translate(-2px,-2px). */
  --article-back-bg: var(--button-outline-bg);
  --article-back-text-color: var(--button-outline-text);
  --article-back-border: var(--button-outline-border);
  --error-page-quote-shadow: var(--shadow-accent); /** Sticker card on page ground — theme-aware pink/lime role. */
}