/**
 * ZDS v1 — Design tokens.
 *
 * Sourced from Figma (Dev Mode MCP) — file "zapliance-DEV-landing-pages",
 * node 3781:2 "🎨 Design System", sections 01–05. See TOKENS.md for the
 * full Figma-name → --zds-* mapping and notes on every gap/discrepancy.
 *
 * All tokens are scoped under .zds-v1 so a future v2 can reuse the same
 * token names inside .zds-v2 without collision.
 *
 * NOTE: CSS custom properties cannot be read inside @media conditions.
 * The --zds-bp-* tokens below are a documented reference for authors;
 * actual breakpoints in zds-v1.css must repeat the raw px value in the
 * @media query itself. Figma's Design System page does not expose explicit
 * breakpoint pixel values (only paired desktop/mobile type styles) — these
 * remain PLACEHOLDERS pending confirmation. See TOKENS.md gap list.
 */

/* --zds-font-family-base below is Outfit — self-hosted the same way as
   Axiforma (assets/fonts/*, @font-face, no CDN dependency). Previously only
   pulled in ad-hoc via followup.css's Google Fonts @import (and Elementor's
   own per-post custom-font CSS in wp-content/uploads/elementor/css/), so
   every other ZDS-active page silently fell back to the system-ui stack.
   No static Light (300) weight file exists among the theme's uploaded
   Outfit files — only Regular/Medium/SemiBold/Bold — so this uses the
   variable-font source instead of the missing static weight. */
@font-face {
    font-family: "Outfit";
    src: url("../../fonts/outfit/Outfit-VariableFont_wght.ttf") format("truetype-variations");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

.zds-v1 {
    /* ---- Color primitives (raw Figma palette — "01 — Colors") ---- */
    --zds-color-cream: #fffbed;
    /* White primary's pressed/focus border is this gradient, not a flat
       cream color — confirmed via Figma inspect panel (border-image-source),
       same 92.23deg pattern as --zds-color-lime-border-gradient. */
    --zds-color-cream-border-gradient: linear-gradient(92.23deg, #fffbed 0.37%, rgba(255, 251, 237, 0.5) 99.58%);
    --zds-color-mint: #5ccf9a;
    --zds-color-mint-bright: #49f5a5;
    /* Figma labels this swatch "green" under 01 — Colors/background, but it is the
       same hex as the Button "Dark BG - Yellow" token — a labeling inconsistency
       in the source file. Named "lime" here to avoid colliding with mint/green. */
    --zds-color-lime: #dafc85;
    --zds-color-deep-green: #11221e;
    --zds-color-dark-green: #152b26;
    --zds-color-beige: #e3dece;
    --zds-color-taupe: #94928a;
    --zds-color-warning-bg: #fff7c7;
    --zds-color-success-bg: #dff6ea;
    --zds-color-error-bg: #f7d7d7;
    /* Figma numbered scale ("green-700"/"neutral-700"), added for the mega
       menu (mega-menu.md). green-700 is the same hex already used by
       --zds-color-on-light-link below — aliased, not redefined. */
    --zds-color-green-700: var(--zds-color-on-light-link);
    --zds-color-neutral-700: #706e67;
    --zds-color-bg-warning: color-mix(in srgb, var(--zds-color-on-light-warning) 15%, transparent);
    --zds-color-bg-success: color-mix(in srgb, var(--zds-color-on-light-success) 15%, transparent);
    --zds-color-bg-error: color-mix(in srgb, var(--zds-color-on-light-danger) 15%, transparent);

    /* Button state colors — "Dark BG - Yellow" (source: Figma node 1243:863,
       "Button/dark BG/yellow/square", full Size×Type×State matrix). Hover and
       Pressed are distinct hues, not opacity variants of --zds-color-lime. */
    --zds-color-lime-hover: #c8f94f;
    --zds-color-lime-pressed: #c4e66c;
    --zds-color-lime-border-focus: #eaffb6;
    /* Primary's pressed/focus border is actually this gradient, not the
       flat --zds-color-lime-border-focus above — confirmed via Figma
       inspect panel (border-image-source). --zds-color-lime-border-focus
       is now unused; kept in case a flat fallback is needed later. */
    --zds-color-lime-border-gradient: linear-gradient(92.23deg, #eaffb6 0.37%, rgba(227, 255, 157, 0.5) 99.58%);

    /* Button state colors — "Dark BG - Green" (source: Figma node 1243:761,
       "Button/dark BG/green/square", full Size×Type×State matrix). Unlike
       Yellow, Green's focus border reuses the hover shade (mint-bright)
       rather than having its own pale tint. */
    --zds-color-mint-border-pressed: #baffdf;
    --zds-color-mint-border-gradient: linear-gradient(92.23deg, #baffdf 0.37%, rgba(70, 193, 135, 0.5) 99.58%);
    --zds-color-mint-focus-text: #55eda6;

    /* ---- Semantic color — default theme (site is dark-background-first) ---- */
    --zds-color-bg: var(--zds-color-deep-green);
    --zds-color-surface: var(--zds-color-dark-green);
    --zds-color-surface-light: #ffffff;
    --zds-color-surface-cream: var(--zds-color-cream);
    --zds-color-surface-default: var(--zds-color-surface-light);
    --zds-color-surface-error: var(--zds-color-error-bg);
    --zds-color-surface-dark: var(--zds-color-surface);
    --zds-color-overlay-dark: rgba(17, 34, 30, 0.6);
    --zds-color-overlay-dark-subtle: rgba(17, 34, 30, 0.3);
    --zds-color-overlay-light: rgba(255, 251, 237, 0.6);
    --zds-color-panel-default: rgba(77, 77, 77, 0.1);
    --zds-color-panel-green-default: rgba(92, 207, 154, 0.06);
    --zds-color-panel-green-hover: rgba(92, 207, 154, 0.03);
    --zds-color-panel-green-click: var(--zds-color-panel-green-default);
    --zds-color-panel-lime-default: rgba(218, 252, 133, 0.06);
    --zds-color-panel-lime-hover: rgba(218, 252, 133, 0.03);
    --zds-color-panel-lime-click: var(--zds-color-panel-lime-default);
    --zds-color-panel-white-default: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 100%);
    --zds-color-panel-green-gradient-active: linear-gradient(90deg, #5ccf9a 0%, rgba(92, 207, 154, 0.2) 100%);
    --zds-color-panel-lime-gradient-active: linear-gradient(90deg, #dafc85 0%, rgba(218, 252, 133, 0.2) 100%);
    --zds-color-text: var(--zds-color-cream);
    --zds-color-text-secondary: var(--zds-color-beige);
    --zds-color-text-tertiary: var(--zds-color-taupe);
    --zds-color-text-disabled: #4d4b46;
    --zds-color-primary: var(--zds-color-mint);
    --zds-color-primary-hover: var(--zds-color-mint-bright);
    --zds-color-secondary: var(--zds-color-lime);
    --zds-color-border: #1e5540;
    --zds-color-border-subtle: var(--zds-color-dark-green);
    --zds-color-border-focus: var(--zds-color-mint-bright);
    --zds-color-border-brand: var(--zds-color-mint);
    --zds-color-border-error: #fecaca;
    --zds-color-border-success: #bbf7d0;
    --zds-color-border-warning: #fde68a;
    --zds-color-icon: var(--zds-color-cream);
    --zds-color-icon-default: var(--zds-color-deep-green);
    --zds-color-icon-inverse: var(--zds-color-cream);
    --zds-color-icon-brand: var(--zds-color-mint);
    --zds-color-icon-accent: var(--zds-color-lime);
    --zds-color-icon-subtle: var(--zds-color-taupe);
    --zds-color-icon-disabled: #cec9b5;
    --zds-color-icon-error: var(--zds-color-danger);
    --zds-color-icon-success: #bbf7d0;
    --zds-color-icon-warning: #fde68a;
    --zds-color-icon-success-solid: var(--zds-color-success);
    --zds-color-icon-warning-solid: var(--zds-color-warning);
    --zds-color-success: #22c55e;
    --zds-color-warning: #f59e0b;
    --zds-color-danger: #ef4444;
    --zds-color-text-on-brand: var(--zds-color-deep-green);
    --zds-color-text-on-accent: var(--zds-color-deep-green);
    --zds-color-text-tertiary-grey: #4d4d4d;
    --zds-color-text-brand: var(--zds-color-mint-bright);
    --zds-color-text-accent: var(--zds-color-lime);

    /* Deep-green tint overlays — used by the "Light BG - BW" button variant.
       20% is confirmed via Figma inspect panel for every state that uses
       it. 16% is now unused — see TOKENS.md. */
    --zds-overlay-deep-green-10: rgba(17, 34, 30, 0.1);
    --zds-overlay-deep-green-16: rgba(17, 34, 30, 0.16);
    --zds-overlay-deep-green-20: rgba(17, 34, 30, 0.2);
    /* Mint tint overlay — mega menu badge pill background (mega-menu.md). */
    --zds-overlay-mint-10: rgba(92, 207, 154, 0.1);
    --zds-overlay-mint-30: rgba(92, 207, 154, 0.3);
    --zds-overlay-mint-50: rgba(92, 207, 154, 0.5);
    /* Cream tint overlay — language switcher trigger background. */
    --zds-overlay-cream-10: rgba(255, 251, 237, 0.1);
    --zds-overlay-cream-20: rgba(255, 251, 237, 0.2);

    /* ---- Semantic color — "on light" variant (for content inside a light-bg
       container, e.g. a light card/section). Not the page default. ---- */
    --zds-color-on-light-bg: var(--zds-color-cream);
    --zds-color-on-light-text: var(--zds-color-deep-green);
    --zds-color-on-light-text-secondary: #1e5540;
    --zds-color-on-light-text-tertiary: var(--zds-color-taupe);
    --zds-color-on-light-text-disabled: #cec9b5;
    --zds-color-on-light-text-inverse: var(--zds-color-cream);
    --zds-color-on-light-text-brand: #3ba87a;
    --zds-color-on-light-text-accent: #87a21f;
    --zds-color-on-light-text-on-brand: var(--zds-color-on-light-text);
    --zds-color-on-light-text-on-accent: var(--zds-color-on-light-text);
    --zds-color-on-light-link: #2d825e;
    --zds-color-on-light-link-hover: #1e5540;
    --zds-color-on-light-border: var(--zds-color-beige);
    --zds-color-on-light-border-subtle: #f0edd4;
    --zds-color-on-light-border-strong: var(--zds-color-deep-green);
    --zds-color-on-light-success: #166534;
    --zds-color-on-light-warning: #854d0e;
    --zds-color-on-light-danger: #991b1b;

    /* ---- Typography — two-family system: Axiforma (headings/UI), Outfit (body) ---- */
    --zds-font-family-heading: "Axiforma", system-ui, -apple-system, sans-serif;
    --zds-font-family-base: "Outfit", system-ui, -apple-system, sans-serif;

    /* Heading scale ("02 — Typography", heading/*). md/lg/display confirmed
       by design as 75/100/140px (the documented Figma label) — the file's
       own rendered "Aa" sample was clamped to 72px, an authoring bug, not
       the intended size. See TOKENS.md gap note for detail. */
    --zds-heading-size-xs: 32px;
    --zds-heading-size-sm: 42px;
    --zds-heading-size-default: 56px;
    --zds-heading-size-md: 75px;
    --zds-heading-size-lg: 100px;
    --zds-heading-size-display: 140px;
    --zds-heading-size-mobile-xs: 24px;
    --zds-heading-size-mobile-sm: 28px;
    --zds-heading-size-mobile-default: 32px;
    --zds-heading-size-mobile-lg: 40px;
    --zds-heading-size-mobile-display: 56px;
    --zds-heading-weight: var(--zds-font-weight-bold);
    --zds-heading-line-height: 1.2;
    --zds-heading-line-height-default: 1.3;
    --zds-heading-line-height-display: 1.1;

    /* Body scale ("02 — Typography", body/*) — Outfit, Light by default with a
       matching SemiBold ("_bold") pairing at every step. */
    --zds-body-size-xs: 14px;
    --zds-body-size-caption: 13px;
    --zds-body-size-small: 16px;
    --zds-body-size-base: 18px;
    --zds-body-size-large: 24px;
    --zds-body-size-mobile-small: 12px;
    --zds-body-size-mobile-base: 14px;
    --zds-body-size-mobile-large: 18px;
    --zds-body-line-height: 1.45;
    --zds-body-line-height-mobile: 1.4;
    /* Fixed px, not a multiplier — 16/13 isn't a clean ratio like the others above. */
    --zds-body-line-height-caption: 16px;

    /* Label / overline ("02 — Typography") — Axiforma Medium */
    --zds-label-size-sm: 12px;
    --zds-label-size-md: 14px;
    --zds-label-size-lg: 16px;
    --zds-label-line-height: 1.3;
    --zds-overline-size-default: 12px;
    --zds-overline-size-large: 14px;
    --zds-overline-size-mobile: 11px;
    --zds-overline-tracking-default: 0.96px;
    --zds-overline-tracking-large: 1.12px;
    --zds-overline-tracking-mobile: 0.88px;
    --zds-overline-line-height: 1.3;

    /* Component-specific typography (components/*) — real Figma text styles,
       useful even though no visual Button/Input component was read this pass. */
    --zds-font-size-button: 16px;
    --zds-font-family-button: var(--zds-font-family-heading);
    --zds-font-weight-button: var(--zds-font-weight-medium);
    --zds-line-height-button: 1.3;
    --zds-font-size-button-mobile: 15px;
    /* xl uses a distinct typographic treatment (Axiforma Regular, not Medium)
       — confirmed on the real xl button component, not the sm/lg one. */
    --zds-font-size-button-xl: 18px;
    --zds-font-weight-button-xl: var(--zds-font-weight-regular);
    --zds-line-height-button-xl: 1.5;
    --zds-font-size-form-label: 18px;
    --zds-font-family-form-label: var(--zds-font-family-heading);
    --zds-font-weight-form-label: var(--zds-font-weight-regular);
    --zds-line-height-form-label: 1.5;
    --zds-font-size-input: 16px;
    --zds-font-family-input: var(--zds-font-family-base);
    --zds-line-height-input: 1.5;
    --zds-font-size-helper-text: 14px;
    --zds-line-height-helper-text: 1.45;
    --zds-font-size-placeholder: 16px;
    --zds-line-height-placeholder: 1.5;
    --zds-font-size-badge-label: 12px;
    --zds-line-height-badge-label: 1.3;
    --zds-font-size-nav-link: 15px;
    --zds-font-size-nav-label: 14px;

    /* Generic weights (used across all groups above) */
    --zds-font-weight-light: 300;
    --zds-font-weight-regular: 400;
    --zds-font-weight-medium: 500;
    --zds-font-weight-semibold: 600;
    --zds-font-weight-bold: 700;

    /* Kept for compatibility with the Phase 1 scaffold / any code already
       referencing a generic ladder — mapped onto the closest real body step. */
    --zds-font-size-xs: var(--zds-body-size-xs);
    --zds-font-size-sm: var(--zds-body-size-small);
    --zds-font-size-base: var(--zds-body-size-base);
    --zds-font-size-md: var(--zds-body-size-base);
    --zds-font-size-lg: var(--zds-body-size-large);
    --zds-font-size-xl: var(--zds-heading-size-xs);
    --zds-font-size-2xl: var(--zds-heading-size-sm);
    --zds-font-size-3xl: var(--zds-heading-size-default);
    --zds-line-height-tight: var(--zds-heading-line-height);
    --zds-line-height-base: var(--zds-font-size-form-label);

    /* ---- Spacing scale ("03 — Spacing") — real px values, 4px-multiple steps ---- */
    --zds-space-0: 0;
    --zds-space-1: 4px;
    --zds-space-2: 8px;
    --zds-space-3: 12px;
    --zds-space-4: 16px;
    --zds-space-5: 20px;
    --zds-space-6: 24px;
    --zds-space-7: 28px;
    --zds-space-8: 32px;
    --zds-space-30: 30px;
    --zds-space-10: 40px;
    --zds-space-12: 48px;
    --zds-space-14: 56px;
    --zds-space-16: 64px;
    --zds-space-20: 80px;
    --zds-space-24: 96px;
    --zds-space-32: 128px;
    --zds-space-40: 160px;
    --zds-space-48: 192px;
    --zds-space-64: 256px;

    /* 04 — Corner Radius */
    --zds-radius-none: 0;
    --zds-radius-xs: 2px;
    --zds-radius-sm: 4px;
    --zds-radius-6: 6px;
    --zds-radius-md: 8px;
    --zds-radius-lg: 12px;
    --zds-radius-xl: 16px;
    --zds-radius-2xl: 24px;
    --zds-radius-3xl: 32px;
    --zds-radius-4xl: 40px;
    /* Not present in Figma's radius scale — added as a standard pill utility
       for the "Rounded" button variant seen in "06 — Buttons". */
    --zds-radius-full: 9999px;

    /* ---- Gradients ---- */
    --zds-gradient-brand-green: linear-gradient(90deg, #5ccf9a 0%, #49f5a5 100%);
    --zds-gradient-brand-lime: linear-gradient(90deg, #dafc85 0%, #c8f94f 100%);
    --zds-gradient-dark-green: linear-gradient(90deg, #11221e 0%, #152b26 100%);
    --zds-gradient-hero-dark: linear-gradient(90deg, #11221e 0%, #152b26 60%, rgba(73, 245, 165, 0.15) 100%);
    --zds-gradient-cream-fade: linear-gradient(90deg, #fffbed 0%, rgba(240, 237, 212, 0) 100%);

    /* ---- Shadows / effects ("05 — Elevation & Effects") ---- */
    --zds-shadow-card-xs: 0px 1px 2px 0px rgba(17, 34, 30, 0.04), 0px 1px 3px 0px rgba(17, 34, 30, 0.06);
    --zds-shadow-card-sm: 0px 4px 6px -1px rgba(17, 34, 30, 0.06), 0px 1px 3px 0px rgba(17, 34, 30, 0.08);
    --zds-shadow-card-md: 0px 10px 15px -3px rgba(17, 34, 30, 0.06), 0px 4px 6px -1px rgba(17, 34, 30, 0.08);
    --zds-shadow-card-lg: 0px 25px 25px -5px rgba(17, 34, 30, 0.06), 0px 10px 15px -3px rgba(17, 34, 30, 0.1);
    --zds-shadow-card-xl: 0px 40px 60px -10px rgba(17, 34, 30, 0.06), 0px 20px 25px -5px rgba(17, 34, 30, 0.12);
    --zds-shadow-popover: 0px 12px 16px -4px rgba(17, 34, 30, 0.1), 0px 4px 6px -2px rgba(17, 34, 30, 0.08);
    --zds-shadow-modal: 0px 24px 48px -12px rgba(17, 34, 30, 0.18);
    --zds-shadow-tooltip: 0px 2px 4px 0px rgba(17, 34, 30, 0.12);

    --zds-shadow-button-hover-green: 0px 0px 8px 0px rgba(85, 237, 166, 0.4);
    --zds-shadow-button-hover-yellow: 0px 0px 6.8px 0px rgba(200, 249, 79, 0.46);
    --zds-shadow-button-hover-white: 0px 0px 6.8px 0px rgba(255, 251, 237, 0.46);
    --zds-shadow-button-hover-black: 0px 0px 8px 0px rgba(17, 34, 30, 0.4);
    /* Distinct from hover-green: smaller blur, used only on primary:active */
    --zds-shadow-button-pressed-green: 0px 0px 4px 0px rgba(85, 237, 166, 0.4);
    --zds-shadow-button-focus-green: 0px 0px 0px 4px rgba(92, 207, 154, 0.4);
    --zds-shadow-button-focus-yellow: 0px 0px 0px 4px rgba(218, 252, 133, 0.4);
    --zds-shadow-button-focus-white: 0px 0px 0px 4px rgba(255, 251, 237, 0.23);
    --zds-shadow-button-focus-black: 0px 0px 0px 4px rgba(17, 34, 30, 0.1);

    --zds-ring-focus-green: 0px 0px 0px 1px rgba(92, 207, 154, 0.6), 0px 0px 0px 3px rgba(73, 245, 165, 0.5);
    --zds-ring-focus-lime: 0px 0px 0px 1px rgba(218, 252, 133, 0.6), 0px 0px 0px 3px rgba(200, 249, 79, 0.5);
    --zds-ring-focus-neutral: 0px 0px 0px 1px rgba(17, 34, 30, 0.3), 0px 0px 0px 3px rgba(17, 34, 30, 0.2);
    --zds-ring-focus-error: 0px 0px 0px 3px rgba(239, 68, 68, 0.3);

    /* Input states ("05 — Effects", input/*) — the only Input-related visuals
       in the Figma file; no full field mockup (label/helper/disabled) exists.
       See TOKENS.md gap note. */
    --zds-input-shadow-default: inset 0px 1px 2px 0px rgba(17, 34, 30, 0.05);
    --zds-input-shadow-focus: 0px 0px 0px 3px rgba(73, 245, 165, 0.4), inset 0px 1px 2px 0px rgba(17, 34, 30, 0.05);
    --zds-input-shadow-error: 0px 0px 0px 3px rgba(239, 68, 68, 0.25), inset 0px 1px 2px 0px rgba(239, 68, 68, 0.08);

    /* Ambient glow (05 — Effects, glow/*) — confirmed directly by design via
       Figma Inspect panel (not read via MCP — rate-limited this pass). */
    --zds-glow-green: 0px 0px 24px 0px rgba(73, 245, 165, 0.35), 0px 0px 48px 0px rgba(92, 207, 154, 0.15);
    --zds-glow-lime: 0px 0px 24px 0px rgba(218, 252, 133, 0.4), 0px 0px 48px 0px rgba(200, 249, 79, 0.15);
    --zds-glow-hero: 0px 0px 80px 0px rgba(73, 245, 165, 0.2), 0px 0px 160px 0px rgba(92, 207, 154, 0.08);

    /* Glass effect (05 — Effects, Frame/Glass/*) — confirmed directly by
       design. "Elevation" swatch in Figma is blur + inner-shadow combined,
       not a third distinct value. */
    --zds-glass-blur: 35px;
    --zds-glass-inner-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;

    /* "07 — Frame Cards" component — a distinct, smaller blur than the
       general glass effect above (17.5px vs 35px), confirmed across all
       12 card instances in the component (4 background tints × repeats).
       Reuses --zds-glass-inner-shadow (identical value in every instance).
       Each tint also carries its own 3px gradient rim border — hue matches
       the tint, confirmed for lime and mint/mint-light (mint-light and mint
       share one border gradient despite different bg opacity). Neutral is
       the one exception: white ring despite its gray tint. */
    --zds-glass-card-blur: 17.5px;
    --zds-glass-card-bg-neutral: rgba(77, 77, 77, 0.1);
    --zds-glass-card-border-neutral: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.05) 50%);
    --zds-glass-card-bg-lime: rgba(218, 252, 133, 0.06);
    --zds-glass-card-border-lime: linear-gradient(135deg, rgba(218, 252, 133, 0.5) 0%, rgba(218, 252, 133, 0.1) 50%);
    --zds-glass-card-bg-mint-light: rgba(92, 207, 154, 0.03);
    --zds-glass-card-bg-mint: rgba(92, 207, 154, 0.06);
    --zds-glass-card-border-mint: linear-gradient(135deg, rgba(92, 207, 154, 0.5) 0%, rgba(92, 207, 154, 0.1) 50%);

    /* Generic aliases kept for the Phase 1 scaffold's shadow-sm/md/lg names */
    --zds-shadow-sm: var(--zds-shadow-card-xs);
    --zds-shadow-md: var(--zds-shadow-card-md);
    --zds-shadow-lg: var(--zds-shadow-card-lg);

    /* ---- Breakpoints — not defined in Figma; synced with Bootstrap 5.3.1's
       scale (bootstrap.min.css is enqueued globally by the theme on every
       page, so it's the real shared breakpoint system already in effect). ---- */
    --zds-bp-sm: 576px;
    --zds-bp-md: 768px;
    --zds-bp-lg: 992px;
    --zds-bp-xl: 1200px;
    --zds-bp-xxl: 1400px;

    /* Container */
    --zds-container-max-width: 1280px;
    --zds-container-padding-inline: var(--zds-space-4);

    /* Footer container — distinct from the shared section container above. */
    --zds-footer-container-max-width: 1680px;
    --zds-header-container-max-width: 1680px;
    --zds-layout-edge-padding: 40px;

    /* Button icon gap placeholders. Figma has not defined icon-in-button
       spacing yet, so every size currently preserves the previous 8px gap. */
    --zds-btn-gap-sm: var(--zds-space-2);
    --zds-btn-gap-lg: var(--zds-space-2);
    --zds-btn-gap-xl: var(--zds-space-2);

    /* Play button (circular video-play control) — source: Figma node
       3017:2374 "Play Yellow" + 3017:2399 "Play Green", Default/Hover/Click
       states. Icon fill colors read directly from the exported SVG assets,
       not estimated from a screenshot. */
    --zds-media-btn-size: 64px;
    /* Confirmed by design directly, layer-by-layer (Figma dev-mode inspect
       values), after an earlier CSS technique (radial-gradient masks) both
       rendered soft/jagged edges AND got the ring proportions wrong (no
       gap between the two rings). Exact Figma values, not rounded — the
       replacement technique (mask-composite on real box-model edges, see
       zds-v1.css section 5) doesn't share the old technique's sub-pixel
       antialiasing problem, so there's no reason to round these anymore. */
    --zds-media-btn-inner-size: 51.2px;
    --zds-media-btn-border-width: 3.2px;
    --zds-media-btn-icon-size: 24px;
    --zds-media-btn-bg-yellow: rgba(218, 252, 133, 0.16);
    --zds-media-btn-bg-yellow-active: rgba(218, 252, 133, 0.48);
    --zds-media-btn-border-yellow-default: rgba(255, 255, 255, 0.15);
    --zds-media-btn-border-yellow-active: rgba(218, 252, 133, 0.4);
    --zds-media-btn-icon-color-yellow: var(--zds-color-lime);
    --zds-media-btn-icon-color-yellow-active: var(--zds-color-lime-hover);
    /* Blur radius narrowed from the source's literal 10px (2× the SVG's
       feGaussianBlur stdDeviation=5) to 6px — the 1:1 value read as visibly
       wider-spreading than Figma's own render once combined with the outer
       ring; tightened by eye against a side-by-side comparison. */
    --zds-media-btn-shadow-yellow-hover: 0px 1px 6px rgba(218, 252, 133, 0.31);
    --zds-media-btn-shadow-yellow-active: 0px 1px 6px rgba(218, 252, 133, 0.73);

    /* Green: two confirmed anomalies vs. Yellow, kept faithful to source
       (not "corrected" to match Yellow's pattern) — see TOKENS.md.
       1. Icon fill does NOT change color at any state (#5CCF9A throughout —
          verified via both the default and hover SVG assets, which contain
          the identical fill despite being separate exported files).
       2. Hover/click glow shadow uses lime (--zds-media-btn-shadow-yellow-*),
          not a green-tinted shadow — reused as-is via shared tokens below. */
    --zds-media-btn-bg-green: rgba(92, 207, 154, 0.16);
    --zds-media-btn-bg-green-active: rgba(92, 207, 154, 0.48);
    --zds-media-btn-border-green-default: rgba(255, 255, 255, 0.15);
    --zds-media-btn-border-green-active: rgba(92, 207, 154, 0.4);
    --zds-media-btn-icon-color-green: var(--zds-color-mint);
}