/* ============================================================
   WDA UI KIT — DESIGN TOKENS  (v1.0)
   The single source of truth. Every component reads from here.
   ============================================================ */

:root {
  /* ============================================================
     WDA BRAND STYLE v1.0 — CANONICAL MASTER TOKENS
     The single source of truth. Master palette + scales live here;
     the semantic --color-* tokens below are ALIASES that point at
     these. Never hand-write raw HEX in component CSS — read a token.
     Deep Navy foundation + Violet CTA + Blue/Cyan digital accents.
     ============================================================ */

  /* Master palette (official) */
  --wda-violet: #694ad9;   /* primary accent, CTA, active state        */
  --wda-blue:   #598cf0;   /* secondary accent, links, progress, data  */
  --wda-sky:    #29b9f2;   /* infographics, connector lines, badges    */
  --wda-cyan:   #29cdf2;   /* light highlight, glow, hover sparkle      */
  --wda-navy:   #17243a;   /* dark surfaces, footer, hero, body text    */

  /* Purple scale */
  --wda-violet-50: #f6f4fd;  --wda-violet-100:#eae6fa; --wda-violet-200:#d5ccf4;
  --wda-violet-300:#b7a8ed;  --wda-violet-400:#8e77e2; --wda-violet-500:#694ad9;
  --wda-violet-600:#5f45c6;  --wda-violet-700:#5440b1; --wda-violet-800:#473a96;
  --wda-violet-900:#38337a;

  /* Blue scale */
  --wda-blue-50:#f5f8fe; --wda-blue-100:#e8effd; --wda-blue-200:#d1dffb;
  --wda-blue-300:#afc8f8; --wda-blue-400:#82a9f4; --wda-blue-500:#598cf0;
  --wda-blue-600:#5180da; --wda-blue-700:#4872c2; --wda-blue-800:#3d60a4;
  --wda-blue-900:#314e83;

  /* Sky scale */
  --wda-sky-50:#f2fbfe; --wda-sky-100:#e1f5fd; --wda-sky-200:#c3ebfb;
  --wda-sky-300:#98ddf9; --wda-sky-400:#5ecaf5; --wda-sky-500:#29b9f2;
  --wda-sky-600:#27a7dc; --wda-sky-700:#2494c4; --wda-sky-800:#217aa5;
  --wda-sky-900:#1e6084;

  /* Cyan scale */
  --wda-cyan-50:#f2fcfe; --wda-cyan-100:#e1f8fd; --wda-cyan-200:#c3f1fb;
  --wda-cyan-300:#98e7f9; --wda-cyan-400:#5edaf5; --wda-cyan-500:#29cdf2;
  --wda-cyan-600:#27b9dc; --wda-cyan-700:#24a3c4; --wda-cyan-800:#2186a5;
  --wda-cyan-900:#1e6884;

  /* Neutral foundation */
  --wda-white:#ffffff; --wda-page-bg:#f6f8fc; --wda-surface:#ffffff;
  --wda-surface-soft:#f0f4fa; --wda-surface-muted:#e8eef7;
  --wda-line:#d9e2ef; --wda-line-strong:#c7d3e3;
  /* #67758A passes WCAG AA (4.54:1) for small text on white; the old #718096
     (4.1:1) did not, so muted readable text now uses #67758A everywhere. */
  --wda-text-muted-readable:#67758a; --wda-text-secondary:#526174; --wda-text-primary:#17243a;
  --wda-navy-soft:#223149; --wda-navy-deep:#101a2b; --wda-navy-black:#0b1422;

  /* Semantic */
  --wda-success:#20b26b; --wda-success-soft:#eaf8f1; --wda-success-text:#127445;
  --wda-warning:#f59e0b; --wda-warning-soft:#fff7e6; --wda-warning-text:#9a5b00;
  --wda-danger:#e5484d;  --wda-danger-soft:#fdeeef;  --wda-danger-text:#a52a2f;
  --wda-info:#4872c2;    --wda-info-soft:#e1f5fd;    --wda-info-text:#1e6084;
  --wda-whatsapp:#25d366;--wda-whatsapp-soft:#e9fbef;--wda-whatsapp-text:#147a3a;

  /* Brand role aliases — BLUE is the primary interactive color; violet is
     a controlled secondary accent; sky = accent, cyan = highlight.
     NOTE: --wda-primary keeps the bright logo blue #598CF0 as the brand
     identity. The APPLIED component primary (--color-brand-primary below)
     uses blue-700 #4872C2 — white-on-#598CF0 is only 3.26:1 (sub-AA) and
     the token is also used as text in ~90 places, so #4872C2 (4.71:1) is
     the accessible realization. #598CF0 still shows in gradients/focus/glow. */
  --wda-primary: var(--wda-blue);            /* #598CF0 — brand primary identity */
  --wda-primary-hover: #4872c2;
  --wda-primary-active: #3d60a4;
  --wda-secondary: var(--wda-violet);        /* violet — controlled accent       */
  --wda-accent: var(--wda-sky);              /* #29B9F2 — infographic accent      */
  --wda-highlight: var(--wda-cyan);          /* #29CDF2 — glow / highlight        */
  --wda-link: #4872c2;
  --wda-link-hover: #694ad9;
  --wda-focus-ring: rgba(41, 185, 242, 0.28);   /* sky focus ring */

  /* Canonical gradients */
  --wda-gradient-brand: linear-gradient(135deg, #29cdf2 0%, #29b9f2 28%, #598cf0 64%, #694ad9 100%);
  --wda-gradient-blue-cyan:   linear-gradient(135deg, #29cdf2 0%, #598cf0 100%);
  --wda-gradient-blue-violet: linear-gradient(135deg, #598cf0 0%, #694ad9 100%);
  --wda-gradient-cta:   var(--wda-gradient-blue-cyan);   /* blue-led CTA gradient */
  --wda-gradient-dark:  linear-gradient(145deg, #17243a 0%, #101a2b 100%);
  --wda-gradient-ambient:
    radial-gradient(circle at 14% 24%, rgba(41,205,242,.18) 0%, rgba(41,205,242,0) 34%),
    radial-gradient(circle at 86% 28%, rgba(105,74,217,.16) 0%, rgba(105,74,217,0) 38%),
    radial-gradient(circle at 58% 74%, rgba(89,140,240,.14) 0%, rgba(89,140,240,0) 32%);

  /* Glass surfaces (tokens only; applied where a glass treatment is wanted) */
  --wda-glass-light-bg: rgba(255,255,255,.72);
  --wda-glass-light-border: rgba(255,255,255,.78);
  --wda-glass-dark-bg: rgba(23,36,58,.72);
  --wda-glass-dark-border: rgba(255,255,255,.12);
  --wda-glass-blur: blur(18px) saturate(135%);

  /* Brand shadows */
  --wda-shadow-primary: 0 12px 28px rgba(105,74,217,.26);
  --wda-shadow-cyan:    0 12px 30px rgba(41,205,242,.20);

  /* Fonts — mapped to the project's current pairing (typography unchanged) */
  --wda-font-heading: var(--font-display);
  --wda-font-body:    var(--font-sans);

  /* ---- Brand accents — ALIASES onto the WDA canonical master palette ---- */
  /* Primary = BLUE. Uses blue-700 #4872C2 (AA 4.71 as both white-on-fill
     and text-on-white) because this token is applied as text in ~90 places
     and white-on-#598CF0 is sub-AA (3.26). This makes blue the dominant
     interactive color while staying readable. Hover/press go darker.       */
  --color-brand-primary:        var(--wda-blue-700);      /* #4872C2 */
  --color-brand-primary-hover:  var(--wda-blue-800);      /* #3D60A4 */
  --color-brand-primary-press:  var(--wda-blue-900);      /* #314E83 */

  /* Secondary = WDA sky (#29B9F2) — the digital/infographic accent role.   */
  --color-brand-secondary:        var(--wda-sky);         /* #29B9F2 */
  --color-brand-secondary-hover:  var(--wda-sky-600);     /* #27A7DC */
  --color-brand-secondary-press:  var(--wda-sky-700);     /* #2494C4 */

  /* Transition stops + highlight — kept on the canonical cyan→violet sweep.*/
  --color-brand-transition-blue:    var(--wda-blue);        /* #598CF0 */
  --color-brand-transition-indigo:  var(--wda-blue-600);    /* #5180DA */
  --color-brand-transition-violet:  var(--wda-violet-400);  /* #8E77E2 */
  --color-brand-highlight:          var(--wda-cyan);        /* #29CDF2 */

  /* RGB channels for token-based rgba() glows (primary = blue, secondary = sky). */
  --color-brand-primary-rgb:    72, 114, 194;
  --color-brand-secondary-rgb:  41, 185, 242;

  /* Dual-accent soft fills + borders — blue primary, sky secondary.       */
  --color-brand-primary-soft:     rgba(72, 114, 194, .10);
  --color-brand-primary-border:   rgba(72, 114, 194, .22);
  --color-brand-secondary-soft:   rgba(41, 185, 242, .10);
  --color-brand-secondary-border: rgba(41, 185, 242, .24);

  /* Mixed sky→violet — refined dual-tone accents (eyebrow lines, washes,   */
  /* connector lines, headline highlights). Both logo colors, together.     */
  --color-brand-mix-soft: linear-gradient(90deg, rgba(41,185,242,.12) 0%, rgba(105,74,217,.12) 100%);
  --color-brand-mix-line: linear-gradient(90deg, #29B9F2 0%, #694AD9 100%);

  /* ============================================================
     CANONICAL WDA BRAND GRADIENT — the ONE official brand sweep.
     cyan → sky → blue → violet, 135deg. The literal lives ONLY in
     --wda-gradient-brand (above). Every component reads --gradient-brand
     or a derived semantic variant below — never hand-write a gradient.
     The previous conflicting indigo/magenta master sweep has been
     removed; those raw stops are no longer part of the system.
     Use the full sweep SELECTIVELY (hero highlights, logo decor, thin
     illuminated borders, glow, accent text). Solid accessible blue
     (--color-brand-primary) drives ordinary primary actions.
     ============================================================ */
  --gradient-brand:        var(--wda-gradient-brand);
  --gradient-brand-text:   var(--wda-gradient-brand);   /* clipped accent text */
  --gradient-brand-blue-cyan:   var(--wda-gradient-blue-cyan);
  --gradient-brand-blue-violet: var(--wda-gradient-blue-violet);
  --gradient-brand-ambient: var(--wda-gradient-ambient); /* subtle bg wash    */
  --gradient-dark:          var(--wda-gradient-dark);    /* large dark surface */

  /* Soft / border / glow variants — canonical cyan→sky→blue→violet stops. */
  --gradient-brand-soft: linear-gradient(
    135deg,
    rgba(41, 205, 242, 0.16) 0%,
    rgba(41, 185, 242, 0.16) 28%,
    rgba(89, 140, 240, 0.16) 64%,
    rgba(105, 74, 217, 0.16) 100%
  );
  --gradient-brand-border: linear-gradient(
    135deg,
    rgba(41, 205, 242, 0.72) 0%,
    rgba(41, 185, 242, 0.72) 28%,
    rgba(89, 140, 240, 0.72) 64%,
    rgba(105, 74, 217, 0.72) 100%
  );
  --gradient-brand-glow: linear-gradient(
    135deg,
    rgba(41, 205, 242, 0.26) 0%,
    rgba(41, 185, 242, 0.22) 28%,
    rgba(89, 140, 240, 0.22) 64%,
    rgba(105, 74, 217, 0.24) 100%
  );
  --gradient-brand-simple: var(--wda-gradient-cta);

  /* ---- Back-compat aliases ----
     Existing components reference the older token names below. They now
     resolve to the canonical sweep so there is a single source of truth
     and no markup/CSS churn. Prefer the --gradient-brand-* names above. */
  --brand-gradient:        var(--gradient-brand);
  --brand-gradient-soft:   var(--gradient-brand-soft);
  --brand-gradient-border: var(--gradient-brand-border);
  --brand-gradient-glow:   var(--gradient-brand-glow);
  --gradient-accent-text:  var(--gradient-brand-text);

  /* Brand tints (light washes for accent surfaces) — blue primary / sky secondary. */
  --color-brand-tint:                   var(--wda-blue-100);    /* #E8EFFD blue wash */
  --color-brand-tint-strong:            var(--wda-blue-200);    /* #D1DFFB */
  --color-brand-secondary-tint:         var(--wda-sky-100);     /* #E1F5FD */
  --color-brand-secondary-tint-strong:  var(--wda-sky-200);     /* #C3EBFB */

  /* Foreground colors on brand fills (contrast-correct). */
  --color-text-on-brand:            #FFFFFF;  /* white on blue primary    */
  --color-text-on-brand-secondary:  #17243A;  /* dark navy ink on sky/cyan */

  /* ---- Ink / dark surfaces — calm premium navy / graphite-blue ----
     Source of truth for every LARGE dark surface (footer, dark bands,
     CTA banners, infographic shells, workflow panels, cookie banner…).
     Deliberately NEUTRAL navy — purple is an accent only and must never
     own a large background. Borders are a cool navy-gray, not violet.     */
  --color-ink:                  #17243A;  /* primary dark — deep navy base  */
  --color-ink-surface:          #1D2B44;  /* secondary dark surface         */
  --color-ink-elevated:         #243451;  /* nested dark row / card         */
  --color-ink-hover:            #2B3D5D;  /* dark surface hover             */
  --color-ink-border:           rgba(148, 171, 210, .18);  /* cool navy-gray hairline */
  --color-ink-border-soft:      rgba(148, 171, 210, .11);
  --color-ink-border-strong:    rgba(148, 171, 210, .30);
  --color-ink-glow:             rgba(41, 205, 242, .16);  /* cyan digital glow / illuminated edge */

  /* ---- Backgrounds — canonical cool neutrals (page stays white for cards) ---- */
  --color-bg-page:              var(--wda-white);          /* #FFFFFF  */
  --color-bg-surface:           var(--wda-surface-soft);   /* #F0F4FA  */
  --color-bg-surface-2:         var(--wda-surface-muted);  /* #E8EEF7  */
  --color-bg-accent:            var(--wda-blue-50);        /* #F5F8FE blue wash */

  /* ---- Text — navy primary + canonical cool greys ---- */
  --color-text-primary:         var(--wda-navy);            /* #17243A */
  --color-text-secondary:       var(--wda-text-secondary);  /* #526174 */
  --color-text-muted:           var(--wda-text-muted-readable);  /* #67758A — AA on white */
  --color-text-inverse:         #FFFFFF;
  --color-text-on-dark-muted:   #AEB8D0;
  --color-text-brand:           var(--wda-link);            /* #4872C2 blue link/brand text, AA 4.71 */
  --color-text-brand-secondary: var(--wda-sky-700);         /* #2494C4 legible sky icon/text */
  --color-text-brand-on-dark:   var(--wda-blue-300);        /* #AFC8F8 light blue, AA on navy */

  /* ---- Borders ---- */
  --color-border-default:       var(--wda-line);            /* #D9E2EF */
  --color-border-strong:        var(--wda-line-strong);     /* #C7D3E3 */
  --color-border-focus:         var(--wda-blue);            /* #598CF0 — focus is BLUE */

  /* ---- Semantic states — canonical WDA semantics ---- */
  --color-state-success:        var(--wda-success);         /* #20B26B */
  --color-state-success-tint:   var(--wda-success-soft);    /* #EAF8F1 */
  --color-state-warning:        var(--wda-warning);         /* #F59E0B */
  --color-state-warning-tint:   var(--wda-warning-soft);    /* #FFF7E6 */
  --color-state-error:          var(--wda-danger);          /* #E5484D */
  --color-state-error-tint:     var(--wda-danger-soft);     /* #FDEEEF */
  --color-state-info:           var(--wda-blue-700);        /* #4872C2 — info blue, white-safe fill */
  --color-state-info-tint:      var(--wda-info-soft);       /* #E1F5FD */

  /* ---- Overlay / focus ---- */
  --color-overlay:              rgba(11, 16, 32, .64);
  --color-focus-ring:           var(--wda-focus-ring);      /* rgba(41,185,242,.28) sky focus ring */
  --color-disabled-bg:          #EEF1F7;
  --color-disabled-text:        #AAB2C4;

  /* ---- Typography families ---- */
  --font-sans:    'Manrope', system-ui, 'Segoe UI', Arial, sans-serif;
  --font-display: 'Geologica', 'Manrope', system-ui, sans-serif;

  /* ---- Type scale (desktop) — size / line-height ---- */
  --fs-display: 64px;  --lh-display: 1.04;
  --fs-h1:      52px;  --lh-h1:      1.08;
  --fs-h2:      40px;  --lh-h2:      1.12;
  --fs-h3:      30px;  --lh-h3:      1.2;
  --fs-h4:      24px;  --lh-h4:      1.28;
  --fs-h5:      20px;  --lh-h5:      1.35;
  --fs-eyebrow: 14px;  --lh-eyebrow: 1.2;
  --fs-lead:    20px;  --lh-lead:    1.55;
  --fs-body-lg: 18px;  --lh-body-lg: 1.6;
  --fs-body:    16px;  --lh-body:    1.6;
  --fs-body-sm: 14px;  --lh-body-sm: 1.55;
  --fs-caption: 13px;  --lh-caption: 1.4;
  --fs-stat:    56px;  --lh-stat:    1.0;
  --fs-price:   40px;  --lh-price:   1.05;

  /* ---- Font weights ---- */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-extra:   800;

  /* ---- Spacing scale (8pt base) ---- */
  --space-2:   2px;
  --space-4:   4px;
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-24:  24px;
  --space-32:  32px;
  --space-48:  48px;
  --space-64:  64px;
  --space-80:  80px;
  --space-120: 120px;

  /* ---- Radius ---- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(11,16,32,.06), 0 1px 3px rgba(11,16,32,.07);
  --shadow-md: 0 6px 16px rgba(11,16,32,.08), 0 2px 6px rgba(11,16,32,.06);
  --shadow-lg: 0 18px 40px rgba(11,16,32,.12), 0 6px 14px rgba(11,16,32,.07);
  --shadow-focus: 0 0 0 4px var(--color-focus-ring);

  /* ---- Layout ---- */
  --container-max:  1200px;
  --container-wide: 1320px;
  --container-text: 720px;
  --page-margin-desktop: 120px;
  --page-margin-tablet:  40px;
  --page-margin-mobile:  20px;

  /* ---- Control heights ---- */
  --control-sm: 36px;
  --control-md: 44px;
  --control-lg: 52px;

  /* ---- Section rhythm ---- */
  --section-y-desktop: 120px;
  --section-y-tablet:  80px;
  --section-y-mobile:  56px;

  /* ---- Z-index ---- */
  --z-header:  100;
  --z-dropdown:200;
  --z-float:   300;
  --z-modal:   400;
  --z-toast:   500;
  /* Cookie consent sits above every in-page layer (header/float/modal/toast).
     It is always appended directly to <body>, so it can never be trapped by a
     stacking context. Single dedicated token — not a random per-rule value. */
  --z-cookie:  9000;
  /* Custom cursor (.xcursor) must paint above EVERY layer, including the lead
     modal and cookie consent — otherwise it vanishes behind an open modal.
     Appended directly to <body> (no trapping stacking context), pointer-events
     none, so the max value here never blocks interaction. */
  --z-cursor:  2147483647;

  /* ---- Motion (legacy doc chrome) ---- */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur:  .18s;

  /* ============================================================
     MOTION SYSTEM TOKENS  (v1.1 — extends v1.0)
     Semantic motion vocabulary extracted from the wda.kz theme.
     Components must read these instead of hardcoding ms / beziers.
     ============================================================ */

  /* ---- Duration ---- */
  --motion-duration-instant:   120ms;  /* state flips, checkbox, focus ring */
  --motion-duration-fast:      180ms;  /* hover feedback, link underline    */
  --motion-duration-standard:  320ms;  /* default UI transition             */
  --motion-duration-emphasis:  480ms;  /* accordions, dropdowns, modals     */
  --motion-duration-reveal:    800ms;  /* on-scroll content reveal          */
  --motion-duration-cinematic: 1200ms; /* hero mask / overlay wipe          */
  --motion-duration-hero:      1600ms; /* full hero entrance sequence cap   */
  --motion-duration-page:      1000ms; /* page-to-page overlay transition   */

  /* ---- Delay / stagger step ---- */
  --motion-delay-none:        0ms;
  --motion-delay-stagger-xs:  60ms;   /* dense lists, nav metadata          */
  --motion-delay-stagger-sm:  100ms;  /* card grids, feature lists          */
  --motion-delay-stagger-md:  160ms;  /* heading lines, hero copy           */
  --motion-delay-stagger-lg:  240ms;  /* fullscreen nav links, big reveals  */

  /* ---- Easing ---- */
  --motion-easing-standard:  cubic-bezier(.2, .96, .34, 1);   /* general UI  */
  --motion-easing-enter:     cubic-bezier(.23, 1, .32, 1);    /* elements in */
  --motion-easing-exit:      cubic-bezier(.755, .05, .855, .06); /* out / hide */
  --motion-easing-reveal:    cubic-bezier(.77, 0, .175, 1);   /* mask reveal */
  --motion-easing-cinematic: cubic-bezier(.86, 0, .07, 1);    /* hero / page */
  --motion-easing-soft:      cubic-bezier(.165, .84, .44, 1); /* gentle ease */
  --motion-easing-cursor:    cubic-bezier(.2, .96, .34, 1);   /* pointer     */

  /* ---- Distance ---- */
  --motion-distance-micro:   4px;     /* arrow nudge, press lift            */
  --motion-distance-small:   16px;    /* fade-up paragraphs                 */
  --motion-distance-medium:  32px;    /* card / image entrance              */
  --motion-distance-large:   64px;    /* hero block parallax travel         */
  --motion-distance-full:    101%;    /* mask / overlay off-screen offset   */

  /* ============================================================
     BUTTON & CTA SYSTEM TOKENS  (v1.2 — extends v1.1)
     Semantic aliases + button geometry. Components read THESE so
     no ms / px / bezier is hardcoded twice. The motion aliases
     map the short button vocabulary onto the established
     motion-duration / motion-easing scale — one source of truth.
     ============================================================ */

  /* ---- Motion aliases (short button vocabulary) ---- */
  --motion-fast:      var(--motion-duration-fast);       /* 180ms · icon shift  */
  --motion-base:      var(--motion-duration-standard);   /* 320ms · bg / border */
  --motion-slow:      var(--motion-duration-emphasis);   /* 480ms · overlay     */
  --ease-standard:    var(--motion-easing-standard);     /* general UI          */
  --ease-emphasized:  var(--motion-easing-reveal);       /* sweep / wipe        */
  --ease-out-soft:    var(--motion-easing-soft);         /* gentle settle       */

  /* ---- Button interaction quantities ---- */
  --btn-icon-shift:    5px;    /* arrow nudge (4–6px window)        */
  --btn-hover-lift:   -2px;    /* hover rise — never more than 2px  */
  --btn-overlay-scale: 1.06;   /* icon-circle grow on hover         */

  /* ---- Button geometry ---- */
  --btn-radius:        var(--radius-pill);
  --btn-pad-sm:        18px;
  --btn-pad-md:        26px;
  --btn-pad-lg:        34px;
  --btn-pad-xl:        34px;   /* hero CTA — desktop (alias: --hero)*/
  --btn-icon-sm:       24px;   /* icon-circle diameter · sm         */
  --btn-icon-md:       30px;   /* icon-circle diameter · md         */
  --btn-icon-lg:       38px;   /* icon-circle diameter · lg         */
  --btn-icon-xl:       38px;   /* icon-circle diameter · hero      */

  /* Semantic height + font aliases (map onto the established control / type scale).
     xl == hero: the dedicated hero-conversion tier. */
  --btn-height-sm:     var(--control-sm);   /* 36px */
  --btn-height-md:     var(--control-md);   /* 44px */
  --btn-height-lg:     var(--control-lg);   /* 52px */
  --btn-height-xl:     62px;                 /* hero CTA — desktop */
  --btn-font-size-sm:  var(--fs-body-sm);   /* 14px */
  --btn-font-size-md:  var(--fs-body);      /* 16px */
  --btn-font-size-lg:  var(--fs-body-lg);   /* 18px */
  --btn-font-size-xl:  17px;                 /* hero label */
  --btn-gap-xl:        12px;                  /* hero label↔icon gap */
  --btn-lh-xl:         1.15;                  /* hero line-height */

  /* ---- Glass surface (selective premium blocks) ---- */
  --btn-glass-bg:         rgba(255,255,255,.10);
  --btn-glass-bg-strong:  rgba(255,255,255,.17);
  --btn-glass-border:     rgba(255,255,255,.28);
  --btn-glass-border-hov: rgba(255,255,255,.46);
  --btn-glass-fallback:   rgba(18,24,43,.74);  /* no backdrop-filter support */
}

/* Hero (xl) button tier scales down on smaller viewports so the CTA stays
   confident without dominating. lg / md / sm are fixed across breakpoints.
   Breakpoints use the documented scale: lg 1024px, sm 576px. */
@media (max-width: 1024px) {
  :root {
    --btn-height-xl: 58px;
    --btn-pad-xl:    28px;
    --btn-icon-xl:   34px;
    --btn-font-size-xl: 16px;
    --btn-gap-xl:    10px;
  }
}
@media (max-width: 576px) {
  :root {
    --btn-height-xl: 54px;
    --btn-pad-xl:    22px;
    --btn-icon-xl:   32px;
    --btn-font-size-xl: 16px;
    --btn-gap-xl:    10px;
  }
}

/* ============================================================
   REDUCED MOTION — global override of the motion token layer.
   When the user prefers reduced motion every long, transform-heavy
   token collapses to a short opacity-only fade. Nothing is hidden.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-standard:  160ms;
    --motion-duration-emphasis:  160ms;
    --motion-duration-reveal:    160ms;
    --motion-duration-cinematic: 200ms;
    --motion-duration-hero:      200ms;
    --motion-duration-page:      0ms;
    --motion-delay-stagger-xs:   0ms;
    --motion-delay-stagger-sm:   0ms;
    --motion-delay-stagger-md:   0ms;
    --motion-delay-stagger-lg:   0ms;
    --motion-distance-micro:     0px;
    --motion-distance-small:     0px;
    --motion-distance-medium:    0px;
    --motion-distance-large:     0px;
    --btn-icon-shift:            0px;
    --btn-hover-lift:            0px;
    --btn-overlay-scale:         1;
  }
}