/* DEV: Vendored verbatim copy of @gomining/ds-tokens (css/tokens.css),
   pinned to the installed v2.1.x. Served statically at /docs/ds/tokens.css
   for the partner docs page. Do not edit by hand — re-copy from node_modules. */
:root {
  /* ===================================================
     PRIMITIVE COLORS
     Source of truth — raw values from Figma palette.
     Do not use directly in components; use semantic tokens.
  =================================================== */

  --gm-color-yellow: #fba705;
  --gm-color-green: #1ccc8d;
  --gm-color-purple: #7540ef;
  --gm-color-red: #ff2b5e;
  --gm-color-grey: #a0a0b5;
  --gm-color-violet: #ab5bfa;
  --gm-color-pink: #d94df2;
  --gm-color-blue: #2e95fe;

  --gm-color-black: #000000;
  --gm-color-white: #ffffff;

  /* ===================================================
     COLOR SCALES (opacity-based, color-mix)
     Generated from primitives — updates automatically when primitive changes.
     Use for backgrounds, overlays, hover states, borders.
  =================================================== */

  --gm-color-purple-90: color-mix(in srgb, var(--gm-color-purple) 90%, transparent);
  --gm-color-purple-80: color-mix(in srgb, var(--gm-color-purple) 80%, transparent);
  --gm-color-purple-70: color-mix(in srgb, var(--gm-color-purple) 70%, transparent);
  --gm-color-purple-60: color-mix(in srgb, var(--gm-color-purple) 60%, transparent);
  --gm-color-purple-50: color-mix(in srgb, var(--gm-color-purple) 50%, transparent);
  --gm-color-purple-40: color-mix(in srgb, var(--gm-color-purple) 40%, transparent);
  --gm-color-purple-30: color-mix(in srgb, var(--gm-color-purple) 30%, transparent);
  --gm-color-purple-20: color-mix(in srgb, var(--gm-color-purple) 20%, transparent);
  --gm-color-purple-10: color-mix(in srgb, var(--gm-color-purple) 10%, transparent);
  --gm-color-purple-5: color-mix(in srgb, var(--gm-color-purple) 5%, transparent);

  --gm-color-red-90: color-mix(in srgb, var(--gm-color-red) 90%, transparent);
  --gm-color-red-80: color-mix(in srgb, var(--gm-color-red) 80%, transparent);
  --gm-color-red-70: color-mix(in srgb, var(--gm-color-red) 70%, transparent);
  --gm-color-red-60: color-mix(in srgb, var(--gm-color-red) 60%, transparent);
  --gm-color-red-50: color-mix(in srgb, var(--gm-color-red) 50%, transparent);
  --gm-color-red-40: color-mix(in srgb, var(--gm-color-red) 40%, transparent);
  --gm-color-red-30: color-mix(in srgb, var(--gm-color-red) 30%, transparent);
  --gm-color-red-20: color-mix(in srgb, var(--gm-color-red) 20%, transparent);
  --gm-color-red-10: color-mix(in srgb, var(--gm-color-red) 10%, transparent);
  --gm-color-red-5: color-mix(in srgb, var(--gm-color-red) 5%, transparent);

  --gm-color-green-90: color-mix(in srgb, var(--gm-color-green) 90%, transparent);
  --gm-color-green-80: color-mix(in srgb, var(--gm-color-green) 80%, transparent);
  --gm-color-green-70: color-mix(in srgb, var(--gm-color-green) 70%, transparent);
  --gm-color-green-60: color-mix(in srgb, var(--gm-color-green) 60%, transparent);
  --gm-color-green-50: color-mix(in srgb, var(--gm-color-green) 50%, transparent);
  --gm-color-green-40: color-mix(in srgb, var(--gm-color-green) 40%, transparent);
  --gm-color-green-30: color-mix(in srgb, var(--gm-color-green) 30%, transparent);
  --gm-color-green-20: color-mix(in srgb, var(--gm-color-green) 20%, transparent);
  --gm-color-green-10: color-mix(in srgb, var(--gm-color-green) 10%, transparent);
  --gm-color-green-5: color-mix(in srgb, var(--gm-color-green) 5%, transparent);

  --gm-color-yellow-90: color-mix(in srgb, var(--gm-color-yellow) 90%, transparent);
  --gm-color-yellow-80: color-mix(in srgb, var(--gm-color-yellow) 80%, transparent);
  --gm-color-yellow-70: color-mix(in srgb, var(--gm-color-yellow) 70%, transparent);
  --gm-color-yellow-60: color-mix(in srgb, var(--gm-color-yellow) 60%, transparent);
  --gm-color-yellow-50: color-mix(in srgb, var(--gm-color-yellow) 50%, transparent);
  --gm-color-yellow-40: color-mix(in srgb, var(--gm-color-yellow) 40%, transparent);
  --gm-color-yellow-30: color-mix(in srgb, var(--gm-color-yellow) 30%, transparent);
  --gm-color-yellow-20: color-mix(in srgb, var(--gm-color-yellow) 20%, transparent);
  --gm-color-yellow-10: color-mix(in srgb, var(--gm-color-yellow) 10%, transparent);
  --gm-color-yellow-5: color-mix(in srgb, var(--gm-color-yellow) 5%, transparent);

  --gm-color-grey-90: color-mix(in srgb, var(--gm-color-grey) 90%, transparent);
  --gm-color-grey-80: color-mix(in srgb, var(--gm-color-grey) 80%, transparent);
  --gm-color-grey-70: color-mix(in srgb, var(--gm-color-grey) 70%, transparent);
  --gm-color-grey-60: color-mix(in srgb, var(--gm-color-grey) 60%, transparent);
  --gm-color-grey-50: color-mix(in srgb, var(--gm-color-grey) 50%, transparent);
  --gm-color-grey-40: color-mix(in srgb, var(--gm-color-grey) 40%, transparent);
  --gm-color-grey-30: color-mix(in srgb, var(--gm-color-grey) 30%, transparent);
  --gm-color-grey-20: color-mix(in srgb, var(--gm-color-grey) 20%, transparent);
  --gm-color-grey-10: color-mix(in srgb, var(--gm-color-grey) 10%, transparent);
  --gm-color-grey-5: color-mix(in srgb, var(--gm-color-grey) 5%, transparent);

  --gm-color-pink-90: color-mix(in srgb, var(--gm-color-pink) 90%, transparent);
  --gm-color-pink-80: color-mix(in srgb, var(--gm-color-pink) 80%, transparent);
  --gm-color-pink-70: color-mix(in srgb, var(--gm-color-pink) 70%, transparent);
  --gm-color-pink-60: color-mix(in srgb, var(--gm-color-pink) 60%, transparent);
  --gm-color-pink-50: color-mix(in srgb, var(--gm-color-pink) 50%, transparent);
  --gm-color-pink-40: color-mix(in srgb, var(--gm-color-pink) 40%, transparent);
  --gm-color-pink-30: color-mix(in srgb, var(--gm-color-pink) 30%, transparent);
  --gm-color-pink-20: color-mix(in srgb, var(--gm-color-pink) 20%, transparent);
  --gm-color-pink-10: color-mix(in srgb, var(--gm-color-pink) 10%, transparent);
  --gm-color-pink-5: color-mix(in srgb, var(--gm-color-pink) 5%, transparent);

  --gm-color-violet-90: color-mix(in srgb, var(--gm-color-violet) 90%, transparent);
  --gm-color-violet-80: color-mix(in srgb, var(--gm-color-violet) 80%, transparent);
  --gm-color-violet-70: color-mix(in srgb, var(--gm-color-violet) 70%, transparent);
  --gm-color-violet-60: color-mix(in srgb, var(--gm-color-violet) 60%, transparent);
  --gm-color-violet-50: color-mix(in srgb, var(--gm-color-violet) 50%, transparent);
  --gm-color-violet-40: color-mix(in srgb, var(--gm-color-violet) 40%, transparent);
  --gm-color-violet-30: color-mix(in srgb, var(--gm-color-violet) 30%, transparent);
  --gm-color-violet-20: color-mix(in srgb, var(--gm-color-violet) 20%, transparent);
  --gm-color-violet-10: color-mix(in srgb, var(--gm-color-violet) 10%, transparent);
  --gm-color-violet-5: color-mix(in srgb, var(--gm-color-violet) 5%, transparent);

  --gm-color-blue-90: color-mix(in srgb, var(--gm-color-blue) 90%, transparent);
  --gm-color-blue-80: color-mix(in srgb, var(--gm-color-blue) 80%, transparent);
  --gm-color-blue-70: color-mix(in srgb, var(--gm-color-blue) 70%, transparent);
  --gm-color-blue-60: color-mix(in srgb, var(--gm-color-blue) 60%, transparent);
  --gm-color-blue-50: color-mix(in srgb, var(--gm-color-blue) 50%, transparent);
  --gm-color-blue-40: color-mix(in srgb, var(--gm-color-blue) 40%, transparent);
  --gm-color-blue-30: color-mix(in srgb, var(--gm-color-blue) 30%, transparent);
  --gm-color-blue-20: color-mix(in srgb, var(--gm-color-blue) 20%, transparent);
  --gm-color-blue-10: color-mix(in srgb, var(--gm-color-blue) 10%, transparent);
  --gm-color-blue-5: color-mix(in srgb, var(--gm-color-blue) 5%, transparent);

  /* Neutral — tint scale (dark → white), step 5.
     NOT opacity: mixed with white, not transparent.
     Neutral 0 = #0e0f1f (Figma palette base), Neutral 100 = #ffffff */
  --gm-color-neutral-base: #0e0f1f;
  --gm-color-neutral-0: var(--gm-color-neutral-base);
  --gm-color-neutral-5: color-mix(in srgb, var(--gm-color-white) 5%, var(--gm-color-neutral-base));
  --gm-color-neutral-10: color-mix(
    in srgb,
    var(--gm-color-white) 10%,
    var(--gm-color-neutral-base)
  );
  --gm-color-neutral-15: color-mix(
    in srgb,
    var(--gm-color-white) 15%,
    var(--gm-color-neutral-base)
  );
  --gm-color-neutral-20: color-mix(
    in srgb,
    var(--gm-color-white) 20%,
    var(--gm-color-neutral-base)
  );
  --gm-color-neutral-25: color-mix(
    in srgb,
    var(--gm-color-white) 25%,
    var(--gm-color-neutral-base)
  );
  --gm-color-neutral-30: color-mix(
    in srgb,
    var(--gm-color-white) 30%,
    var(--gm-color-neutral-base)
  );
  --gm-color-neutral-35: color-mix(
    in srgb,
    var(--gm-color-white) 35%,
    var(--gm-color-neutral-base)
  );
  --gm-color-neutral-40: color-mix(
    in srgb,
    var(--gm-color-white) 40%,
    var(--gm-color-neutral-base)
  );
  --gm-color-neutral-45: color-mix(
    in srgb,
    var(--gm-color-white) 45%,
    var(--gm-color-neutral-base)
  );
  --gm-color-neutral-50: color-mix(
    in srgb,
    var(--gm-color-white) 50%,
    var(--gm-color-neutral-base)
  );
  --gm-color-neutral-55: color-mix(
    in srgb,
    var(--gm-color-white) 55%,
    var(--gm-color-neutral-base)
  );
  --gm-color-neutral-60: color-mix(
    in srgb,
    var(--gm-color-white) 60%,
    var(--gm-color-neutral-base)
  );
  --gm-color-neutral-65: color-mix(
    in srgb,
    var(--gm-color-white) 65%,
    var(--gm-color-neutral-base)
  );
  --gm-color-neutral-70: color-mix(
    in srgb,
    var(--gm-color-white) 70%,
    var(--gm-color-neutral-base)
  );
  --gm-color-neutral-75: color-mix(
    in srgb,
    var(--gm-color-white) 75%,
    var(--gm-color-neutral-base)
  );
  --gm-color-neutral-80: color-mix(
    in srgb,
    var(--gm-color-white) 80%,
    var(--gm-color-neutral-base)
  );
  --gm-color-neutral-85: color-mix(
    in srgb,
    var(--gm-color-white) 85%,
    var(--gm-color-neutral-base)
  );
  --gm-color-neutral-90: color-mix(
    in srgb,
    var(--gm-color-white) 90%,
    var(--gm-color-neutral-base)
  );
  --gm-color-neutral-95: color-mix(
    in srgb,
    var(--gm-color-white) 95%,
    var(--gm-color-neutral-base)
  );
  --gm-color-neutral-100: var(--gm-color-white);

  /* ===================================================
     SPACING (4px base grid)
     Numeric names match Figma values; named aliases for backward compat.
  =================================================== */

  --gm-spacing-0: 0px;
  --gm-spacing-2: 2px;
  --gm-spacing-4: 4px;
  --gm-spacing-6: 6px;
  --gm-spacing-8: 8px;
  --gm-spacing-12: 12px;
  --gm-spacing-16: 16px;
  --gm-spacing-20: 20px;
  --gm-spacing-24: 24px;
  --gm-spacing-32: 32px;
  --gm-spacing-40: 40px;
  --gm-spacing-48: 48px;
  --gm-spacing-56: 56px;
  --gm-spacing-64: 64px;

  /* Named aliases — backward compat */
  --gm-spacing-2xs: 2px;
  --gm-spacing-xs: var(--gm-spacing-4);
  --gm-spacing-sm: var(--gm-spacing-8);
  --gm-spacing-md: var(--gm-spacing-16);
  --gm-spacing-lg: var(--gm-spacing-24);
  --gm-spacing-xl: var(--gm-spacing-32);
  --gm-spacing-2xl: var(--gm-spacing-40);
  --gm-spacing-3xl: var(--gm-spacing-48);

  /* ===================================================
     BORDER RADIUS
  =================================================== */

  --gm-radius-none: 0px;
  --gm-radius-xs: 4px;
  --gm-radius-6: 6px;
  --gm-radius-sm: 8px;
  --gm-radius-10: 10px;
  --gm-radius-md: 12px;
  --gm-radius-lg: 16px;
  --gm-radius-xl: 20px;
  --gm-radius-2xl: 24px;
  --gm-radius-3xl: 32px;
  --gm-radius-4xl: 40px;
  --gm-radius-5xl: 48px;
  --gm-radius-6xl: 56px;
  --gm-radius-7xl: 64px;
  --gm-radius-full: 9999px;

  /* ===================================================
     TYPOGRAPHY
  =================================================== */

  /* Font families */
  --gm-font-family-game: "Lilita One", cursive;
  --gm-font-family-display: AtypDisplay, Inter, system-ui, sans-serif;
  --gm-font-family-ui: Inter, Roboto, system-ui, -apple-system, sans-serif;

  /* Font sizes */
  --gm-font-size-2xs: 8px; /* Label/Small */
  --gm-font-size-xs: 10px; /* Label/Medium */
  --gm-font-size-sm: 12px; /* Subtext */
  --gm-font-size-md: 14px; /* Body — base */
  --gm-font-size-lg: 16px; /* Subtitle */
  --gm-font-size-xl-sm: 18px; /* Subtitle 18 */
  --gm-font-size-xl: 20px; /* Subtitle 20 */
  --gm-font-size-2xl: 24px;
  --gm-font-size-3xl: 28px;
  --gm-font-size-4xl: 32px; /* H2 */
  --gm-font-size-5xl: 36px; /* H1 */

  /* Font weights */
  --gm-font-weight-regular: 400;
  --gm-font-weight-medium: 500;
  --gm-font-weight-semibold: 600;
  --gm-font-weight-bold: 700;
  --gm-font-weight-black: 900;

  /* Line heights — px values paired with font sizes */
  --gm-line-height-2xs: 12px; /* Label/Small  8/12  */
  --gm-line-height-xs: 14px; /* Label        10/14 */
  --gm-line-height-sm: 18px; /* Subtext      12/18 */
  --gm-line-height-md: 20px; /* Body         14/20 */
  --gm-line-height-lg: 24px; /* Subtitle 16  16/24 */
  --gm-line-height-xl: 28px; /* Subtitle 18/20 */
  --gm-line-height-2xl: 34px; /* H2           32/34 */
  --gm-line-height-3xl: 44px; /* H1           36/44 */

  /* Letter spacing */
  --gm-letter-spacing-tight: -0.02em; /* H2/Inter, Subtitle 20 Inter */
  --gm-letter-spacing-normal: 0;
  --gm-letter-spacing-wide: 0.06em; /* labels, uppercase captions */

  /* ===================================================
     TYPOGRAPHY STYLES
     Semantic composites — size + line-height + family.
     Font-weight is chosen per context (see variants below).
  =================================================== */

  /* H1 — Atyp Display, 36/44 */
  --gm-text-h1-font: var(--gm-font-family-display);
  --gm-text-h1-size: var(--gm-font-size-5xl);
  --gm-text-h1-line-height: var(--gm-line-height-3xl);

  /* H2 — Atyp Display, 32/34 */
  --gm-text-h2-font: var(--gm-font-family-display);
  --gm-text-h2-size: var(--gm-font-size-4xl);
  --gm-text-h2-line-height: var(--gm-line-height-2xl);

  /* Subtitle 20 — 20/28 */
  --gm-text-subtitle-lg-font: var(--gm-font-family-display);
  --gm-text-subtitle-lg-size: var(--gm-font-size-xl);
  --gm-text-subtitle-lg-line-height: var(--gm-line-height-xl);

  /* Subtitle 18 — 18/28 */
  --gm-text-subtitle-md-font: var(--gm-font-family-display);
  --gm-text-subtitle-md-size: var(--gm-font-size-xl-sm);
  --gm-text-subtitle-md-line-height: var(--gm-line-height-xl);

  /* Subtitle 16 — 16/24 */
  --gm-text-subtitle-sm-font: var(--gm-font-family-ui);
  --gm-text-subtitle-sm-size: var(--gm-font-size-lg);
  --gm-text-subtitle-sm-line-height: var(--gm-line-height-lg);

  /* Body — Inter, 14/20 */
  --gm-text-body-font: var(--gm-font-family-ui);
  --gm-text-body-size: var(--gm-font-size-md);
  --gm-text-body-line-height: var(--gm-line-height-md);

  /* Subtext — Inter, 12/18 */
  --gm-text-subtext-font: var(--gm-font-family-ui);
  --gm-text-subtext-size: var(--gm-font-size-sm);
  --gm-text-subtext-line-height: var(--gm-line-height-sm);

  /* Label — Inter 600, 10/14 */
  --gm-text-label-font: var(--gm-font-family-ui);
  --gm-text-label-size: var(--gm-font-size-xs);
  --gm-text-label-line-height: var(--gm-line-height-xs);
  --gm-text-label-weight: var(--gm-font-weight-semibold);

  /* Label/Small — Inter 600, 8/12 */
  --gm-text-label-sm-font: var(--gm-font-family-ui);
  --gm-text-label-sm-size: var(--gm-font-size-2xs);
  --gm-text-label-sm-line-height: var(--gm-line-height-2xs);
  --gm-text-label-sm-weight: var(--gm-font-weight-semibold);

  /* ===================================================
     SHADOWS
  =================================================== */

  --gm-shadow-sm: 0 0 4px 0 rgb(14 15 31 / 12%), 0 2px 8px 0 rgb(14 15 31 / 20%);
  --gm-shadow-md: 0 0 4px 0 rgb(14 15 31 / 4%), 0 4px 24px 0 rgb(14 15 31 / 8%);
  --gm-shadow-lg: 0 8px 40px 0 rgb(14 15 31 / 80%);
  --gm-shadow-inset: inset 0 1px 0 0 rgb(255 255 255 / 10%);

  /* ===================================================
     TRANSITIONS
  =================================================== */

  --gm-transition-fast: 100ms ease;
  --gm-transition-base: 150ms ease-in-out;
  --gm-transition-slow: 300ms ease;

  /* ===================================================
     FOCUS RING — shared across interactive components
  =================================================== */

  --gm-focus-ring-width: 2px;
  --gm-focus-ring-offset: 2px;
  --gm-focus-ring-color: var(--gm-color-purple);

  /* ===================================================
     Z-INDEX SCALE
  =================================================== */

  --gm-z-index-base: 0;
  --gm-z-index-above: 1;
  --gm-z-index-dropdown: 100;
  --gm-z-index-sticky: 200;
  --gm-z-index-fixed: 300;
  --gm-z-index-overlay: 400;
  --gm-z-index-modal: 500;
  --gm-z-index-toast: 600;
  --gm-z-index-tooltip: 700;

  /* ===================================================
     RESPONSIVE BREAKPOINTS (для использования в JS/TS)
     В CSS использовать напрямую в @media нельзя, только в JS через getComputedStyle
  =================================================== */

  --gm-breakpoint-sm: 576px;
  --gm-breakpoint-md: 768px;
  --gm-breakpoint-lg: 992px;
  --gm-breakpoint-xl: 1200px;
  --gm-breakpoint-2xl: 1440px;

  /* ============================================================
     SEMANTIC TOKENS — DARK THEME (default)
     Source: Figma Dark.tokens.json
     Components must ONLY use tokens from this section and below.
  ============================================================ */

  /* --- Background/Base --- */
  --gm-bg-base-base: #0e0f1f;
  --gm-bg-base-inverse: #ffffff;
  --gm-bg-base-surface: #181928;
  --gm-bg-base-elevated: #181928;
  --gm-bg-base-overlay: #242533;
  --gm-bg-base-input: rgba(255, 255, 255, 0.05);

  /* --- Background/Static (same in both themes) --- */
  --gm-bg-static-dark-deep: #0e0f1f;
  --gm-bg-static-dark-surface: #181928;
  --gm-bg-static-dark-elevated: #242533;
  --gm-bg-static-light: #ffffff;
  --gm-bg-static-none: rgba(255, 255, 255, 0);

  /* --- Background/Surface (theme-independent — Grey = #A0A0B5) --- */
  --gm-bg-surface-subtle: rgba(160, 160, 181, 0.05);
  --gm-bg-surface-default: rgba(160, 160, 181, 0.10);
  --gm-bg-surface-strong: rgba(160, 160, 181, 0.20);
  --gm-bg-surface-heavy: rgba(160, 160, 181, 0.40);
  --gm-bg-surface-solid: #a0a0b5;

  /* --- Background/Neutral dark (adaptive — dark theme = white-based) --- */
  --gm-bg-neutral-dark-100: rgba(255, 255, 255, 1);
  --gm-bg-neutral-dark-80: rgba(255, 255, 255, 0.80);
  --gm-bg-neutral-dark-40: rgba(255, 255, 255, 0.40);
  --gm-bg-neutral-dark-20: rgba(255, 255, 255, 0.20);
  --gm-bg-neutral-dark-10: rgba(255, 255, 255, 0.10);

  /* --- Background/Neutral light (adaptive — dark theme = dark-based) --- */
  --gm-bg-neutral-light-100: rgba(14, 15, 31, 1);
  --gm-bg-neutral-light-80: rgba(14, 15, 31, 0.80);
  --gm-bg-neutral-light-40: rgba(14, 15, 31, 0.40);
  --gm-bg-neutral-light-20: rgba(14, 15, 31, 0.20);
  --gm-bg-neutral-light-10: rgba(14, 15, 31, 0.10);

  /* --- Background/Accent — Purple (dark theme: higher opacity) --- */
  --gm-bg-accent-purple-xsubtle: rgba(117, 64, 239, 0.10);
  --gm-bg-accent-purple-subtle: rgba(117, 64, 239, 0.20);
  --gm-bg-accent-purple-default: rgba(117, 64, 239, 0.30);
  --gm-bg-accent-purple-strong: rgba(117, 64, 239, 0.40);
  --gm-bg-accent-purple-solid: #7540ef;
  --gm-bg-accent-purple-hover: #693ad7;
  --gm-bg-accent-purple-disabled: rgba(117, 64, 239, 0.40);

  /* --- Background/Accent — Yellow (dark theme) --- */
  --gm-bg-accent-yellow-xsubtle: rgba(251, 167, 5, 0.10);
  --gm-bg-accent-yellow-subtle: rgba(251, 167, 5, 0.20);
  --gm-bg-accent-yellow-default: rgba(251, 167, 5, 0.30);
  --gm-bg-accent-yellow-strong: rgba(251, 167, 5, 0.40);
  --gm-bg-accent-yellow-solid: #fba705;
  --gm-bg-accent-yellow-hover: #e29605;
  --gm-bg-accent-yellow-disabled: rgba(251, 167, 5, 0.40);

  /* --- Background/Accent — Green (dark theme) --- */
  --gm-bg-accent-green-xsubtle: rgba(28, 204, 141, 0.10);
  --gm-bg-accent-green-subtle: rgba(28, 204, 141, 0.20);
  --gm-bg-accent-green-default: rgba(28, 204, 141, 0.30);
  --gm-bg-accent-green-strong: rgba(28, 204, 141, 0.40);
  --gm-bg-accent-green-solid: #1ccc8d;
  --gm-bg-accent-green-hover: #19b87f;
  --gm-bg-accent-green-disabled: rgba(28, 204, 141, 0.40);

  /* --- Background/Accent — Red (dark theme) --- */
  --gm-bg-accent-red-xsubtle: rgba(255, 43, 94, 0.10);
  --gm-bg-accent-red-subtle: rgba(255, 43, 94, 0.20);
  --gm-bg-accent-red-default: rgba(255, 43, 94, 0.30);
  --gm-bg-accent-red-strong: rgba(255, 43, 94, 0.40);
  --gm-bg-accent-red-solid: #ff2b5e;
  --gm-bg-accent-red-hover: #e52755;
  --gm-bg-accent-red-disabled: rgba(255, 43, 94, 0.40);

  /* --- Background/Accent — Pink (dark theme) --- */
  --gm-bg-accent-pink-xsubtle: rgba(217, 77, 242, 0.10);
  --gm-bg-accent-pink-subtle: rgba(217, 77, 242, 0.20);
  --gm-bg-accent-pink-default: rgba(217, 77, 242, 0.30);
  --gm-bg-accent-pink-strong: rgba(217, 77, 242, 0.40);
  --gm-bg-accent-pink-solid: #d94df2;
  --gm-bg-accent-pink-hover: #c345da;
  --gm-bg-accent-pink-disabled: rgba(217, 77, 242, 0.40);

  /* --- Background/Accent — Violet (dark theme) --- */
  --gm-bg-accent-violet-xsubtle: rgba(171, 91, 250, 0.10);
  --gm-bg-accent-violet-subtle: rgba(171, 91, 250, 0.20);
  --gm-bg-accent-violet-default: rgba(171, 91, 250, 0.30);
  --gm-bg-accent-violet-strong: rgba(171, 91, 250, 0.40);
  --gm-bg-accent-violet-solid: #ab5bfa;
  --gm-bg-accent-violet-hover: #9a52e1;
  --gm-bg-accent-violet-disabled: rgba(171, 91, 250, 0.40);

  /* --- Background/Accent — Blue (dark theme) --- */
  --gm-bg-accent-blue-xsubtle: rgba(46, 149, 254, 0.10);
  --gm-bg-accent-blue-subtle: rgba(46, 149, 254, 0.20);
  --gm-bg-accent-blue-default: rgba(46, 149, 254, 0.30);
  --gm-bg-accent-blue-strong: rgba(46, 149, 254, 0.40);
  --gm-bg-accent-blue-solid: #2e95fe;
  --gm-bg-accent-blue-hover: #2986e5;
  --gm-bg-accent-blue-disabled: rgba(46, 149, 254, 0.40);

  /* --- Background/Accent OnDark (dark theme — all white-based) --- */
  --gm-bg-accent-ondark-purple-xsubtle: rgba(255, 255, 255, 0.05);
  --gm-bg-accent-ondark-purple-subtle: rgba(255, 255, 255, 0.10);
  --gm-bg-accent-ondark-purple-default: rgba(255, 255, 255, 0.20);
  --gm-bg-accent-ondark-purple-strong: rgba(255, 255, 255, 0.30);
  --gm-bg-accent-ondark-purple-solid: #ffffff;

  --gm-bg-accent-ondark-yellow-xsubtle: rgba(255, 255, 255, 0.05);
  --gm-bg-accent-ondark-yellow-subtle: rgba(255, 255, 255, 0.10);
  --gm-bg-accent-ondark-yellow-default: rgba(255, 255, 255, 0.20);
  --gm-bg-accent-ondark-yellow-strong: rgba(255, 255, 255, 0.30);
  --gm-bg-accent-ondark-yellow-solid: #ffffff;

  --gm-bg-accent-ondark-green-xsubtle: rgba(255, 255, 255, 0.05);
  --gm-bg-accent-ondark-green-subtle: rgba(255, 255, 255, 0.10);
  --gm-bg-accent-ondark-green-default: rgba(255, 255, 255, 0.20);
  --gm-bg-accent-ondark-green-strong: rgba(255, 255, 255, 0.30);
  --gm-bg-accent-ondark-green-solid: #ffffff;

  --gm-bg-accent-ondark-red-xsubtle: rgba(255, 255, 255, 0.05);
  --gm-bg-accent-ondark-red-subtle: rgba(255, 255, 255, 0.10);
  --gm-bg-accent-ondark-red-default: rgba(255, 255, 255, 0.20);
  --gm-bg-accent-ondark-red-strong: rgba(255, 255, 255, 0.30);
  --gm-bg-accent-ondark-red-solid: #ffffff;

  --gm-bg-accent-ondark-pink-xsubtle: rgba(255, 255, 255, 0.05);
  --gm-bg-accent-ondark-pink-subtle: rgba(255, 255, 255, 0.10);
  --gm-bg-accent-ondark-pink-default: rgba(255, 255, 255, 0.20);
  --gm-bg-accent-ondark-pink-strong: rgba(255, 255, 255, 0.30);
  --gm-bg-accent-ondark-pink-solid: #ffffff;

  --gm-bg-accent-ondark-violet-xsubtle: rgba(255, 255, 255, 0.05);
  --gm-bg-accent-ondark-violet-subtle: rgba(255, 255, 255, 0.10);
  --gm-bg-accent-ondark-violet-default: rgba(255, 255, 255, 0.20);
  --gm-bg-accent-ondark-violet-strong: rgba(255, 255, 255, 0.30);
  --gm-bg-accent-ondark-violet-solid: #ffffff;

  --gm-bg-accent-ondark-blue-xsubtle: rgba(255, 255, 255, 0.05);
  --gm-bg-accent-ondark-blue-subtle: rgba(255, 255, 255, 0.10);
  --gm-bg-accent-ondark-blue-default: rgba(255, 255, 255, 0.20);
  --gm-bg-accent-ondark-blue-strong: rgba(255, 255, 255, 0.30);
  --gm-bg-accent-ondark-blue-solid: #ffffff;

  /* --- Border/Neutral (same in both themes) --- */
  --gm-border-neutral-subtle: rgba(160, 160, 181, 0.05);
  --gm-border-neutral-default: rgba(160, 160, 181, 0.10);
  --gm-border-neutral-strong: rgba(160, 160, 181, 0.20);
  --gm-border-neutral-heavy: rgba(160, 160, 181, 0.40);

  /* --- Border/Static (same in both themes) --- */
  --gm-border-static-surface: #ffffff;
  --gm-border-static-dark: #0e0f1f;
  --gm-border-static-grey: #a0a0b5;

  /* --- Border/Inverse (adaptive — dark theme) --- */
  --gm-border-inverse-light: #0e0f1f;
  --gm-border-inverse-dark: #ffffff;
  --gm-border-inverse-surface: #181928;

  /* --- Border/Accent (same in both themes) --- */
  --gm-border-accent-primary: #7540ef;
  --gm-border-accent-success: #1ccc8d;
  --gm-border-accent-warning: #fba705;
  --gm-border-accent-danger: #ff2b5e;
  --gm-border-accent-blue: #2e95fe;
  --gm-border-accent-pink: #d94df2;
  --gm-border-accent-violet: #ab5bfa;
  --gm-border-accent-grey: #a0a0b5;

  /* --- Border/Accent OnDark (adaptive — dark theme all white) --- */
  --gm-border-accent-ondark-primary: #ffffff;
  --gm-border-accent-ondark-success: #ffffff;
  --gm-border-accent-ondark-warning: #ffffff;
  --gm-border-accent-ondark-danger: #ffffff;
  --gm-border-accent-ondark-blue: #ffffff;
  --gm-border-accent-ondark-pink: #ffffff;
  --gm-border-accent-ondark-violet: #ffffff;
  --gm-border-accent-ondark-grey: #ffffff;

  /* --- Icon/Neutral (adaptive — dark theme) --- */
  --gm-icon-neutral-default: #a0a0b5;
  --gm-icon-neutral-default-disabled: rgba(160, 160, 181, 0.40);
  --gm-icon-neutral-dark: #ffffff;
  --gm-icon-neutral-inverse: #0e0f1f;

  /* --- Icon/Static (same in both themes) --- */
  --gm-icon-static-dark: #0e0f1f;
  --gm-icon-static-inverse: #ffffff;

  /* --- Icon/Accent (same in both themes) --- */
  --gm-icon-accent-primary: #7540ef;
  --gm-icon-accent-success: #1ccc8d;
  --gm-icon-accent-warning: #fba705;
  --gm-icon-accent-danger: #ff2b5e;
  --gm-icon-accent-pink: #c345da;
  --gm-icon-accent-violet: #ab5bfa;
  --gm-icon-accent-blue: #2e95fe;
  --gm-icon-accent-grey: #a0a0b5;

  /* --- Icon/Accent OnDark (adaptive — dark theme all white) --- */
  --gm-icon-accent-ondark-primary: #ffffff;
  --gm-icon-accent-ondark-success: #ffffff;
  --gm-icon-accent-ondark-warning: #ffffff;
  --gm-icon-accent-ondark-danger: #ffffff;
  --gm-icon-accent-ondark-pink: #ffffff;
  --gm-icon-accent-ondark-violet: #ffffff;
  --gm-icon-accent-ondark-blue: #ffffff;
  --gm-icon-accent-ondark-grey: #ffffff;

  /* --- Text/Base (adaptive — dark theme) --- */
  --gm-text-base-primary: #ffffff;
  --gm-text-base-secondary: #a0a0b5;
  --gm-text-base-disabled: rgba(160, 160, 181, 0.40);
  --gm-text-base-inverse: #0e0f1f;
  --gm-text-base-inverse-secondary: rgba(14, 15, 31, 0.40);

  /* --- Text/Static (same in both themes) --- */
  --gm-text-static-dark: #0e0f1f;
  --gm-text-static-light: #ffffff;
  --gm-text-static-light-secondary: rgba(255, 255, 255, 0.40);

  /* --- Text/Accent (adaptive — dark theme) --- */
  --gm-text-accent-brand: #693ad7;
  --gm-text-accent-success: #1ccc8d;
  --gm-text-accent-warning: #fba705;
  --gm-text-accent-danger: #ff2b5e;
  --gm-text-accent-blue: #2e95fe;
  --gm-text-accent-pink: #d94df2;
  --gm-text-accent-violet: #ab5bfa;
  --gm-text-accent-grey: #a0a0b5;

  /* --- Text/Accent OnDark (adaptive — dark theme all white) --- */
  --gm-text-accent-ondark-brand: #ffffff;
  --gm-text-accent-ondark-success: #ffffff;
  --gm-text-accent-ondark-warning: #ffffff;
  --gm-text-accent-ondark-danger: #ffffff;
  --gm-text-accent-ondark-blue: #ffffff;
  --gm-text-accent-ondark-pink: #ffffff;
  --gm-text-accent-ondark-violet: #ffffff;
  --gm-text-accent-ondark-grey: #ffffff;

  /* ===================================================
     COMPONENT TOKENS: GAME BUTTON
     Настраиваемые переменные для кнопки.
     Можно переопределить на уровне компонента или темы.
  =================================================== */

  /* Typography */
  --gm-btn-font-family: var(--gm-font-family-game);
  --gm-btn-font-size: var(--gm-font-size-md);
  --gm-btn-font-weight: var(--gm-font-weight-regular);
  --gm-btn-line-height: 20px;
  --gm-btn-letter-spacing: normal;
  --gm-btn-text-transform: uppercase;

  /* States */
  --gm-btn-disabled-opacity: 0.4;
  --gm-btn-active-scale: 0.9;
  --gm-btn-transition: transform var(--gm-transition-base);

  /* Large (default) */
  --gm-btn-lg-height: 44px;
  --gm-btn-lg-radius: var(--gm-radius-lg);
  --gm-btn-lg-padding-y: var(--gm-spacing-md);
  --gm-btn-lg-padding-x: var(--gm-spacing-lg);
  --gm-btn-lg-gap: 6px;
  --gm-btn-lg-icon-size: 16px;

  /* Small */
  --gm-btn-sm-height: 36px;
  --gm-btn-sm-radius: var(--gm-radius-md);
  --gm-btn-sm-padding-y: var(--gm-spacing-sm);
  --gm-btn-sm-padding-x: var(--gm-spacing-md);
  --gm-btn-sm-gap: var(--gm-spacing-xs);
  --gm-btn-sm-icon-size: 14px;

  /* Spinner */
  --gm-btn-spinner-lg-size: 20px;
  --gm-btn-spinner-sm-size: 16px;
  --gm-btn-spinner-track-color: var(--gm-bg-neutral-dark-20);

  /* Decorative */
  --gm-btn-shadow: rgba(0, 0, 0, 0.5);
  --gm-btn-icon-placeholder-bg: var(--gm-bg-neutral-dark-40);
  --gm-btn-gradient-border-width: 4px;

  /* Focus (Game Button only — отдельная outline-стратегия от UI Button) */
  --gm-btn-focus-outline-width: 2px;
  --gm-btn-focus-outline-offset: 3px;

  /* ===================================================
     COMPONENT TOKENS: UI BUTTON
     General-purpose button (selector: button[gm-button], a[gm-button]).
     Отдельный namespace от GAME BUTTON выше.
  =================================================== */

  --gm-ui-btn-height-lg: 48px;
  --gm-ui-btn-height-sm: 40px;
  --gm-ui-btn-skeleton-min-width-lg: 80px;
  --gm-ui-btn-skeleton-min-width-sm: 60px;
  --gm-ui-btn-focus-outline-width: 2px;
  --gm-ui-btn-focus-outline-offset: 3px;
  /* Neutral variant hover opacity (raw color, нет dedicated hover-color
     token т.к. neutral использует solid black без light overlay). */
  --gm-ui-btn-neutral-hover-opacity: 0.85;
  /* Inactive (disabled neutral / danger-ghost) opacity */
  --gm-ui-btn-inactive-opacity: 0.4;

  /* ===================================================
     SHARED TOKENS: SPINNER
     Размеры и треки спиннера — переиспользуются между компонентами.
  =================================================== */

  --gm-spinner-size-md: 20px;
  --gm-spinner-size-sm: 16px;
  --gm-spinner-border-width: 2px;
  --gm-spinner-border-width-sm: 1.5px;
  /* Track-цвет (фон-окружность) для спиннера на тёмных вариантах */
  --gm-spinner-track-on-dark: rgba(255, 255, 255, 0.25);

  /* Loader Classic (GmSpinnerComponent) — conic-gradient «snake-arc».
     По Figma: frame N×N (внешний слот компонента) + активная группа (N-4)×(N-4)
     с 4px воздуха. md из Figma = frame 24, ring 20, thickness ~2px. */
  --gm-spinner-classic-frame-sm: 16px;
  --gm-spinner-classic-frame-md: 24px;
  --gm-spinner-classic-frame-lg: 32px;
  --gm-spinner-classic-ring-sm: 12px;
  --gm-spinner-classic-ring-md: 20px;
  --gm-spinner-classic-ring-lg: 28px;
  --gm-spinner-classic-thickness-sm: 1.25px;
  --gm-spinner-classic-thickness-md: 2px;
  --gm-spinner-classic-thickness-lg: 2.5px;
  --gm-spinner-classic-arc-stop: 74.5%;
  --gm-spinner-classic-duration: 0.8s;
  --gm-spinner-classic-duration-reduced: 3s;

  /* Loader Classic — color endpoints (head=solid, tail=alpha-0).
     Zero-alpha сохраняет hue при интерполяции в conic-gradient
     (CSS keyword `transparent` = rgba(0,0,0,0) → грязный fade через чёрный).
     Источник цветов: Figma "State=*" stops. */
  --gm-spinner-classic-arc-dark: #242533;
  --gm-spinner-classic-arc-dark-0: rgba(36, 37, 51, 0);
  --gm-spinner-classic-arc-purple: var(--gm-color-purple);
  --gm-spinner-classic-arc-purple-0: rgba(117, 64, 239, 0);
  --gm-spinner-classic-arc-white: var(--gm-color-white);
  --gm-spinner-classic-arc-white-0: rgba(255, 255, 255, 0);

  /* ===================================================
     COMPONENT TOKENS: INPUT (GmInputComponent)
     По Figma: Input Compact, один размер md (height 48px, radius 16px).
     Sizing-токены префиксованы `-md` под будущие sm/lg.
  =================================================== */

  /* Sizing (md) */
  --gm-input-height-md: 48px;
  --gm-input-padding-x-md: 16px;
  --gm-input-padding-y-md: 12px;
  --gm-input-radius-md: 16px;
  --gm-input-shell-gap-md: 8px; /* between prefix/input/suffix */
  --gm-input-stroke-width: 1px;

  /* Vertical rhythm */
  --gm-input-header-shell-gap: 8px;
  --gm-input-shell-subtext-gap: 4px;
  --gm-input-header-trailing-gap: 4px;
  --gm-input-label-info-gap: 4px;

  /* Surfaces */
  --gm-input-bg-default: var(--gm-bg-base-elevated);
  --gm-input-bg-disabled: var(--gm-bg-base-elevated);
  --gm-input-bg-valid: rgba(28, 204, 141, 0.05); /* #1CCC8D @ 5% */
  --gm-input-bg-error: rgba(255, 43, 94, 0.05); /* #FF2B5E @ 5% */

  /* Borders */
  --gm-input-stroke-default: var(--gm-color-grey);
  --gm-input-stroke-focus: var(--gm-color-purple);
  --gm-input-stroke-valid: var(--gm-color-green);
  --gm-input-stroke-error: var(--gm-color-red);

  /* Text */
  --gm-input-text: var(--gm-text-base-primary);
  --gm-input-text-disabled: var(--gm-color-grey);
  --gm-input-placeholder: var(--gm-color-grey);
  --gm-input-label-color: var(--gm-text-base-primary);
  --gm-input-info-color: var(--gm-color-grey);
  --gm-input-hint-color: var(--gm-text-base-secondary);
  --gm-input-error-color: var(--gm-color-red);
  --gm-input-valid-color: var(--gm-color-green);

  /* Balance helper */
  --gm-input-balance-icon-color: var(--gm-color-grey);
  --gm-input-balance-amount-color: var(--gm-color-grey);
  --gm-input-balance-max-color: var(--gm-color-purple);

  /* ===================================================
     CHECKBOX TOKENS — GmCheckbox
  =================================================== */

  --gm-checkbox-hit-size: 24px;
  --gm-checkbox-box-size: 20px;
  /* Glyph (checkmark/dash) — ~75% от box, per Figma "Checkbox":
     check 8.5×5.66, dash 8 wide. Раньше glyph заполнял весь box. */
  --gm-checkbox-glyph-size: 15px;
  --gm-checkbox-radius: 6px;
  --gm-checkbox-row-gap: var(--gm-spacing-xs);              /* 4 — между box и text */
  --gm-checkbox-text-gap: var(--gm-spacing-xs);             /* 4 — между label и info */
  --gm-checkbox-info-size: 16px;

  /* `:root` = dark theme defaults: bg = white, glyph = dark text.
     В html.light overrides: bg = purple, glyph = white. */
  --gm-checkbox-bg-on: var(--gm-color-white);
  --gm-checkbox-bg-off: var(--gm-color-grey-20);
  --gm-checkbox-bg-off-disabled: var(--gm-color-grey-10);
  --gm-checkbox-bg-on-disabled: rgba(255, 255, 255, 0.40); /* dark theme: faded white */

  --gm-checkbox-glyph-color: var(--gm-text-static-dark); /* :root dark theme → glyph dark on white bg */

  --gm-checkbox-label-size: var(--gm-font-size-md);
  --gm-checkbox-label-weight: var(--gm-font-weight-regular);
  --gm-checkbox-label-color: var(--gm-text-base-primary);
  --gm-checkbox-label-color-disabled: var(--gm-color-grey-40);

  --gm-checkbox-info-color: var(--gm-color-grey);
  --gm-checkbox-info-disc-opacity: 0.4;
  --gm-checkbox-info-stem-color: var(--gm-color-white);

  --gm-checkbox-focus-ring: var(--gm-focus-ring-color);
  --gm-checkbox-focus-width: var(--gm-focus-ring-width);
  --gm-checkbox-focus-offset: var(--gm-focus-ring-offset);

  /* ===================================================
     RADIO TOKENS — GmRadioGroup / GmRadio
  =================================================== */

  --gm-radio-tap-size: 24px;                                /* hit area / outer container */
  --gm-radio-disc-size: 20px;                               /* visual disc */
  --gm-radio-dot-size: 8px;                                 /* inner dot when checked */
  --gm-radio-row-gap: var(--gm-spacing-6);                  /* 6 — disc ↔ text (visual) */
  --gm-radio-text-gap: var(--gm-spacing-xs);                /* 4 — text ↔ info */
  --gm-radio-info-size: 16px;
  --gm-radio-group-gap: 12px;                               /* 12 — between items */

  /* Default — DARK theme (matches Figma 129:24943).
     Light theme переопределяет ниже через html.light + [data-theme="light"]. */
  --gm-radio-bg-on: var(--gm-color-white);                 /* #FFFFFF — disc на dark scene */
  --gm-radio-bg-off: var(--gm-color-grey-20);              /* translucent → #2B2C3D на dark bg */
  --gm-radio-bg-off-disabled: var(--gm-color-grey-20);     /* same — fade via opacity 0.4 */
  --gm-radio-bg-on-disabled: var(--gm-color-white);        /* full white, fade via opacity 0.4 */

  --gm-radio-dot-color: var(--gm-color-neutral-base);      /* #0E0F1F dark dot на white disc */
  --gm-radio-disabled-opacity: 0.4;

  --gm-radio-label-size: var(--gm-font-size-md);
  --gm-radio-label-weight: var(--gm-font-weight-regular);
  /* Label color используется напрямую через --gm-text-base-primary в radio.component.css
     (избегаем CSS var() chain early-resolve в theme overrides). */
  --gm-radio-label-color-disabled: var(--gm-color-grey-40);

  --gm-radio-info-color: var(--gm-color-grey);

  --gm-radio-focus-ring: var(--gm-focus-ring-color);
  --gm-radio-focus-width: var(--gm-focus-ring-width);
  --gm-radio-focus-offset: var(--gm-focus-ring-offset);

  --gm-radio-transition: var(--gm-transition-fast);

  /* ===================================================
     SWITCH TOKENS — GmSwitch
  =================================================== */

  --gm-switch-track-width: 51px;
  --gm-switch-track-height: 30px;
  --gm-switch-track-radius: var(--gm-radius-full);
  --gm-switch-knob-size: 26px;
  --gm-switch-knob-padding: 2px;
  --gm-switch-knob-locked-width: 47px;
  /* Knob translate вычисляется в CSS через calc() из track-width / knob-size /
     knob-padding — без жёсткого 21px. См. switch.component.css. */

  --gm-switch-track-bg-on: var(--gm-color-purple);
  --gm-switch-track-bg-off: var(--gm-color-grey-20);
  --gm-switch-track-bg-on-disabled: var(--gm-bg-accent-purple-default);  /* purple @ 0.3 */
  --gm-switch-track-bg-off-disabled: var(--gm-color-grey-10);
  --gm-switch-track-bg-locked: var(--gm-color-grey-10);

  --gm-switch-knob-color: var(--gm-color-white);
  --gm-switch-knob-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.15);  /* Figma: knob drop-shadow */
  --gm-switch-disabled-opacity: 0.4;
  /* Lock icon / label color используют --gm-text-base-primary/secondary
     напрямую в CSS — не через intermediate (CSS var chain early-resolve). */
  --gm-switch-lock-icon-size: 24px;  /* совпадает с gm-icon size="lg" (24px) */

  --gm-switch-row-gap: 12px;                                 /* switch ↔ text */
  --gm-switch-text-gap: var(--gm-spacing-xs);                /* 4 — text ↔ info */
  --gm-switch-info-size: 16px;

  --gm-switch-label-size: var(--gm-font-size-md);
  --gm-switch-label-weight: var(--gm-font-weight-regular);
  --gm-switch-label-color-disabled: var(--gm-color-grey-40);
  --gm-switch-info-color: var(--gm-color-grey);

  --gm-switch-focus-ring: var(--gm-focus-ring-color);
  --gm-switch-focus-width: var(--gm-focus-ring-width);
  --gm-switch-focus-offset: var(--gm-focus-ring-offset);

  --gm-switch-transition: var(--gm-transition-base);

  /* ===================================================
     CHECKOUT TOKENS — GmPriceRow / GmPaymentMethodRow /
     GmHomeIndicator / GmApplePayButton / GmGooglePayButton /
     GmCheckoutBlock
  =================================================== */

  /* PriceRow */
  --gm-price-row-label-size: var(--gm-font-size-md);          /* 14 */
  --gm-price-row-label-weight: var(--gm-font-weight-medium);
  --gm-price-row-value-size: var(--gm-font-size-md);
  --gm-price-row-value-weight: var(--gm-font-weight-bold);
  --gm-price-row-label-color: var(--gm-text-base-primary);
  --gm-price-row-value-color: var(--gm-text-base-primary);
  --gm-price-row-meta-size: var(--gm-font-size-xs);           /* 12 */
  --gm-price-row-meta-color: var(--gm-color-grey);
  --gm-price-row-meta-gap: var(--gm-spacing-xs);              /* 4 */
  /* Original (pre-discount) price — per Figma: 12/500, muted, strike-through,
     прижата ближе к актуальной цене (2px gap). */
  --gm-price-row-original-size: var(--gm-font-size-xs);       /* 12 */
  --gm-price-row-original-weight: var(--gm-font-weight-medium);
  --gm-price-row-original-color: var(--gm-color-grey);
  --gm-price-row-prices-gap: var(--gm-spacing-2xs);           /* 2 — gap между original и actual */

  /* PaymentMethodRow */
  --gm-payment-method-row-height: 48px;
  --gm-payment-method-row-radius: var(--gm-radius-md);        /* 12 */
  --gm-payment-method-row-padding-x: 12px;                    /* component-specific (Figma: 12 по бокам) */
  --gm-payment-method-row-padding-y: 12px;                    /* component-specific */
  --gm-payment-method-row-icon-gap: 12px;                     /* icon → content */
  --gm-payment-method-row-trailing-gap: var(--gm-spacing-xs); /* 4 — content → chevron */
  --gm-payment-method-row-bg: var(--gm-bg-base-input);
  --gm-payment-method-row-bg-hover: var(--gm-bg-neutral-dark-10);
  --gm-payment-method-row-bg-selected: var(--gm-bg-neutral-dark-20);
  --gm-payment-method-row-icon-size: 24px;
  --gm-payment-method-row-label-size: var(--gm-font-size-md);     /* 14 — Figma */
  --gm-payment-method-row-label-weight: var(--gm-font-weight-medium); /* 500 — Figma */
  --gm-payment-method-row-label-line-height: var(--gm-line-height-md); /* 20 — Figma */
  --gm-payment-method-row-label-color: var(--gm-text-base-primary);
  --gm-payment-method-row-meta-size: var(--gm-font-size-sm);      /* 12 — Figma 198:15524 */
  --gm-payment-method-row-meta-line-height: var(--gm-line-height-sm); /* 18 — Figma */
  --gm-payment-method-row-meta-color: var(--gm-color-grey);
  --gm-payment-method-row-chevron-color: var(--gm-color-grey);
  --gm-payment-method-row-chevron-size: 16px;

  /* HomeIndicator (iOS bottom bar) */
  --gm-home-indicator-width: 135px;
  --gm-home-indicator-height: 5px;
  --gm-home-indicator-radius: var(--gm-radius-full);
  --gm-home-indicator-color: var(--gm-text-base-primary);
  --gm-home-indicator-container-height: 34px;

  /* "Pay with Apple/Google Pay" — DS-styled, theme-adaptive */
  --gm-pay-with-btn-height: 48px;
  --gm-pay-with-btn-radius: var(--gm-radius-md);              /* 12 */
  --gm-pay-with-btn-padding-x: var(--gm-spacing-md);
  --gm-pay-with-btn-gap: var(--gm-spacing-sm);                /* 8 */
  --gm-pay-with-btn-font-size: var(--gm-font-size-md);
  --gm-pay-with-btn-font-weight: var(--gm-font-weight-medium);
  --gm-pay-with-btn-glyph-size: 24px;
  /* `:root` = dark theme defaults: WHITE button, DARK text/glyph.
     В html.light override: DARK button, WHITE text/glyph. */
  --gm-pay-with-btn-bg: var(--gm-color-white);
  --gm-pay-with-btn-fg: var(--gm-color-neutral-base);

  /* Apple/Google Wallet — strict brand, fixed colors */
  --gm-wallet-btn-height: 48px;
  --gm-wallet-btn-radius: var(--gm-radius-md);
  --gm-wallet-btn-padding-x: var(--gm-spacing-md);
  --gm-wallet-btn-gap: var(--gm-spacing-sm);
  --gm-wallet-btn-glyph-width: 36px;
  --gm-wallet-btn-top-size: 10px;
  --gm-wallet-btn-top-weight: 400;
  --gm-wallet-btn-bottom-size: var(--gm-font-size-md);        /* 14 */
  --gm-wallet-btn-bottom-weight: 600;
  --gm-apple-wallet-bg: #000000;
  --gm-google-wallet-bg: #1f1f1f;
  --gm-wallet-text-color: #ffffff;     /* brand-strict: всегда white */
  /* System font — Apple/Google brand guidelines требуют native system font */
  --gm-wallet-btn-font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', Roboto, system-ui, sans-serif;

  /* CheckoutBlock — composite layout wrapper */
  --gm-checkout-block-width: 402px;                            /* Figma fixture */
  --gm-checkout-block-padding-x: var(--gm-spacing-md);         /* 16 */
  --gm-checkout-block-gap: var(--gm-spacing-md);               /* 16 between sections */
  --gm-checkout-block-bg: transparent;
  --gm-checkout-block-footnote-size: var(--gm-font-size-xs);
  --gm-checkout-block-footnote-color: var(--gm-color-grey);
  --gm-checkout-block-footnote-line-height: var(--gm-line-height-xs);

  /* ===================================================
     DROPDOWN TOKENS — GmDropdownPanel / Item / Search
  =================================================== */

  /* Offset — distance trigger ↔ panel */
  --gm-dropdown-offset: var(--gm-spacing-xs);            /* 4px */

  /* Panel */
  --gm-dropdown-radius: var(--gm-radius-lg);             /* 16 */
  --gm-dropdown-padding: var(--gm-spacing-xs);           /* 4 */
  --gm-dropdown-bg: var(--gm-bg-base-elevated);
  --gm-dropdown-shadow: var(--gm-shadow-md);
  --gm-dropdown-divider-color: var(--gm-border-neutral-default);
  --gm-dropdown-min-width: 224px;                        /* Figma fixture */
  --gm-dropdown-max-height: 320px;                       /* scroll above */

  /* Item */
  --gm-dropdown-item-height: 48px;
  --gm-dropdown-item-radius: var(--gm-radius-md);        /* 12 */
  --gm-dropdown-item-padding-x: var(--gm-spacing-md);    /* 16 */
  --gm-dropdown-item-padding-y: 12px;                    /* component-specific (нет 12 в spacing scale) */
  --gm-dropdown-item-gap: 12px;                          /* component-specific */
  --gm-dropdown-item-font-size: var(--gm-font-size-md);  /* 14 */
  --gm-dropdown-item-color: var(--gm-text-base-primary);
  /* hover/selected — translucent overlay (Figma: #F7F8FA light, rgba(255,255,255,0.05) dark) */
  --gm-dropdown-item-bg-hover: var(--gm-bg-base-input);
  --gm-dropdown-item-bg-selected: var(--gm-bg-base-input);
  --gm-dropdown-item-disabled-opacity: 0.4;

  /* Search */
  --gm-dropdown-search-height: 44px;
  --gm-dropdown-search-padding-x: var(--gm-spacing-md);
  --gm-dropdown-search-padding-y: 12px;                  /* component-specific */
  --gm-dropdown-search-gap: 12px;                        /* component-specific */
  --gm-dropdown-search-icon-size: 16px;
  --gm-dropdown-search-color: var(--gm-text-base-primary);
  --gm-dropdown-search-placeholder-color: var(--gm-color-grey);

  /* Empty state */
  --gm-dropdown-empty-color: var(--gm-color-grey);

  /* ===================================================
     HEADER iOS TOKENS — GmHeaderIos (top navigation bar)
     Component-specific только: height + zone-min-width (нет в existing).
     Остальное — alias на семантические токены DS.
  =================================================== */

  --gm-header-ios-height: 52px;
  --gm-header-ios-zone-min-width: 80px;

  /* SECTION TOKENS — GmSection (navigable list row)
  =================================================== */

  --gm-section-min-height: 66px;
  --gm-section-radius: 16px;
  --gm-section-padding: 12px;
  --gm-section-gap: 12px;
  --gm-section-text-gap: 4px;
  --gm-section-title-tag-gap: 6px;

  /* Surface — adaptive. Dark default = translucent white overlay;
     html.light override → solid white (elevated card on tinted page). */
  --gm-section-bg: rgba(255, 255, 255, 0.05);
  --gm-section-bg-hover: rgba(255, 255, 255, 0.10);
  --gm-section-bg-active: rgba(255, 255, 255, 0.15);

  /* Text */
  /* Title color используется напрямую через --gm-text-base-primary в section.component.css
     (избегаем CSS var() chain early-resolve в theme overrides). */
  --gm-section-subtext-color: var(--gm-color-grey);
  --gm-section-chevron-color: var(--gm-color-grey);
  --gm-section-chevron-size: 16px;
  --gm-section-chevron-stroke-width: 1.5;

  /* Disabled */
  --gm-section-disabled-opacity: 0.4;

  /* Focus ring */
  --gm-section-focus-ring: var(--gm-color-purple);
  --gm-section-focus-ring-offset: 2px;

  /* Icon style — `outline` (32×32 bare) */
  --gm-section-icon-outline-size: 32px;

  /* Icon style — `icon-24` (24×24 bare) */
  --gm-section-icon-24-size: 24px;

  /* Icon style — `tinted` (24 в 40-tinted box) */
  --gm-section-icon-tinted-size: 40px;
  --gm-section-icon-tinted-radius: 12px;
  --gm-section-icon-tinted-padding: 8px;
  --gm-section-icon-tinted-bg: var(--gm-color-grey-10);
  --gm-section-icon-tinted-glyph-size: 24px;

  /* ===================================================
     CODE INPUT TOKENS — GmCodeInput (OTP / verification)
     Большинство значений — alias на --gm-input-* для единого UX.
  =================================================== */

  --gm-code-input-cell-size: 58px;
  --gm-code-input-cell-radius: 16px;
  --gm-code-input-cells-gap: 4px;
  --gm-code-input-group-gap: 4px;
  --gm-code-input-font-size: 20px;
  --gm-code-input-font-weight: var(--gm-font-weight-bold);
  --gm-code-input-stroke-width: var(--gm-input-stroke-width);

  /* Surfaces — bg адаптивный per theme (Figma: dark recessed в dark,
     light recessed в light). bg-base-input даёт rgba(255,255,255,0.05)
     в dark и #F7F8FA в light — пересоздаётся в theme overrides. */
  --gm-code-input-bg-default: var(--gm-bg-base-input);
  --gm-code-input-bg-disabled: var(--gm-input-bg-disabled);
  /* CodeInput error/valid — Figma "Input Code Group" (862:14758):
     TINT bg (5% color) + colored stroke + обычный primary text. Текст
     адаптивен через --gm-text-base-primary (white в dark, dark в light)
     — на 5% tint он остаётся читаемым в обеих темах. */
  --gm-code-input-bg-valid: var(--gm-input-bg-valid);
  --gm-code-input-bg-error: var(--gm-input-bg-error);

  /* Strokes — Figma "Input Code":
     - default: neutral subtle border (универсальный для обеих тем);
     - focus: фиолетовый в LIGHT, белый в DARK (re-declared в theme blocks
       из-за var()-chain early-resolve);
     - valid/error: alias на input.tokens (green/red одинаково в обеих темах). */
  --gm-code-input-stroke-default: var(--gm-border-neutral-default);
  --gm-code-input-stroke-focus: var(--gm-text-base-primary); /* dark theme default → white */
  --gm-code-input-stroke-valid: var(--gm-input-stroke-valid);
  --gm-code-input-stroke-error: var(--gm-input-stroke-error);

  /* Text */
  --gm-code-input-text: var(--gm-text-base-primary);
  --gm-code-input-text-disabled: var(--gm-color-grey);
  --gm-code-input-subtext-color: var(--gm-input-hint-color);

  /* ===================================================
     TAG TOKENS — GmTag / GmVipTag / GmIconTag
     Покрывает Tag Small / Tag Big / Tag Circle / VIP / Icon из Figma.
  =================================================== */

  /* Sizing — sm (Tag Small) */
  --gm-tag-sm-height: 20px;
  --gm-tag-sm-radius: 8px;
  --gm-tag-sm-padding-x: 6px;
  --gm-tag-sm-padding-y: 3px;
  --gm-tag-sm-gap: 2px;
  --gm-tag-sm-font-size: var(--gm-font-size-xs);
  --gm-tag-sm-line-height: var(--gm-line-height-xs);

  /* Sizing — md (Tag Big / Tag Circle / VIP) */
  --gm-tag-md-height: 28px;
  --gm-tag-md-radius: 10px;
  --gm-tag-md-padding-x: 8px;
  --gm-tag-md-padding-y: 4px;
  --gm-tag-md-gap: 4px;
  --gm-tag-md-font-size: var(--gm-font-size-sm);
  --gm-tag-md-line-height: var(--gm-line-height-sm);

  /* Pill shape (Tag Circle / VIP) */
  --gm-tag-pill-radius: var(--gm-radius-full);

  /* VIP tag — leading badge size + custom padding */
  --gm-tag-vip-height: 28px;
  --gm-tag-vip-radius: var(--gm-radius-full);
  --gm-tag-vip-padding-x: 4px;
  --gm-tag-vip-padding-y: 4px;
  --gm-tag-vip-padding-end-extra: var(--gm-spacing-xs);  /* +4px справа под label */
  --gm-tag-vip-gap: 4px;
  --gm-tag-vip-badge-size: 20px;
  --gm-tag-vip-font-size: var(--gm-font-size-xs);
  --gm-tag-vip-line-height: var(--gm-line-height-xs);

  /* Icon tag — square 56x56 */
  --gm-tag-icon-size: 56px;
  --gm-tag-icon-radius: 16px;
  --gm-tag-icon-padding: 10px;
  --gm-tag-icon-glyph-size: 36px;

  /* Typography */
  --gm-tag-font-weight: var(--gm-font-weight-medium);

  /* Surfaces (xsubtle ~ 10% opacity in dark, 5% в light — адаптивно) */
  --gm-tag-bg-purple: var(--gm-bg-accent-purple-xsubtle);
  --gm-tag-bg-red: var(--gm-bg-accent-red-xsubtle);
  --gm-tag-bg-green: var(--gm-bg-accent-green-xsubtle);
  --gm-tag-bg-yellow: var(--gm-bg-accent-yellow-xsubtle);
  --gm-tag-bg-pink: var(--gm-bg-accent-pink-xsubtle);
  --gm-tag-bg-violet: var(--gm-bg-accent-violet-xsubtle);
  --gm-tag-bg-blue: var(--gm-bg-accent-blue-xsubtle);
  --gm-tag-bg-grey: var(--gm-color-grey-10);

  /* Text — neutral использует --gm-text-base-primary напрямую в gm-tag
     (см. tag.component.css). Промежуточный --gm-tag-text-neutral убран
     из-за early-resolve CSS var() chains в :root. */
  /* Text — color (бренд-цвета, совпадают с stroke / Text=Color в Figma) */
  --gm-tag-text-purple: var(--gm-color-purple);
  --gm-tag-text-red: var(--gm-color-red);
  --gm-tag-text-green: var(--gm-color-green);
  --gm-tag-text-yellow: var(--gm-color-yellow);
  --gm-tag-text-pink: var(--gm-color-pink);
  --gm-tag-text-violet: var(--gm-color-violet);
  --gm-tag-text-blue: var(--gm-color-blue);
  --gm-tag-text-grey: var(--gm-color-grey);

  /* Icon tag — always white glyph */
  --gm-tag-icon-glyph-color: var(--gm-color-white);

  /* VIP — tier-specific bg (10% opacity tints) */
  --gm-tag-vip-bg-bronze: rgba(218, 130, 33, 0.10);
  --gm-tag-vip-bg-silver: rgba(160, 160, 181, 0.20);
  --gm-tag-vip-bg-gold: rgba(251, 167, 5, 0.10);
  --gm-tag-vip-bg-platinum: rgba(163, 140, 43, 0.10);
  --gm-tag-vip-bg-diamond: rgba(46, 149, 254, 0.10);
  --gm-tag-vip-bg-legend: rgba(255, 43, 94, 0.10);
  --gm-tag-vip-bg-elite: rgba(160, 160, 181, 0.20);
  /* Gradient backgrounds — avatar / platinum-plus */
  --gm-tag-vip-bg-avatar: linear-gradient(
    90deg,
    rgba(117, 64, 239, 0.20) 0%,
    rgba(217, 77, 242, 0.20) 100%
  );
  --gm-tag-vip-bg-platinum-plus: linear-gradient(
    90deg,
    rgba(160, 160, 181, 0.40) 0%,
    rgba(255, 255, 255, 0.40) 100%
  );

  /* ===================================================
     COMPONENT TOKENS: GmVipBadge
     Standalone full-size VIP badge (status/VIP-badge).
  =================================================== */

  --gm-vip-badge-size-sm: 40px;
  --gm-vip-badge-size-md: 64px;
  --gm-vip-badge-size-lg: 80px;
  --gm-vip-badge-disabled-opacity: 0.4;
  --gm-vip-badge-disabled-grayscale: 1;

  /* ===================================================
     COMPONENT TOKENS: GmReferralBadge
     Реферальные тиры (referer / ambassador / partner / prime-partner).
  =================================================== */

  --gm-referral-badge-size-sm: 40px;
  --gm-referral-badge-size-md: 64px;
  --gm-referral-badge-size-lg: 80px;
  --gm-referral-badge-disabled-opacity: 0.4;
  --gm-referral-badge-disabled-grayscale: 1;

  /* ===================================================
     COMPONENT TOKENS: GmGoBox
     Game-box тиры (bronze / silver / gold / platinum / diamond / legend).
  =================================================== */

  --gm-go-box-size-sm: 40px;
  --gm-go-box-size-md: 64px;
  --gm-go-box-size-lg: 80px;
  --gm-go-box-disabled-opacity: 0.4;
  --gm-go-box-disabled-grayscale: 1;

  /* ===================================================
     SHARED TOKENS: SKELETON SHIMMER
     Универсальные значения для шиммер-анимации поверх любой поверхности.
     `on-dark` — белые градиент-стопы (для тёмных bg).
     `on-light` — чёрные градиент-стопы (для светлых/прозрачных bg).
  =================================================== */

  --gm-skeleton-on-dark-from: rgba(255, 255, 255, 0.15);
  --gm-skeleton-on-dark-peak: rgba(255, 255, 255, 0.40);
  --gm-skeleton-on-light-from: rgba(0, 0, 0, 0.06);
  --gm-skeleton-on-light-peak: rgba(0, 0, 0, 0.15);
  --gm-skeleton-shimmer-duration: 1.5s;

  /* ===================================================
     SHARED TOKENS: BORDER ON DARK SURFACE
     Используется в outline-вариантах, разделителях и т.п.
     при работе на тёмном фоне (data-theme="dark").
  =================================================== */

  --gm-border-on-dark-default: rgba(255, 255, 255, 0.2);
  --gm-border-on-dark-hover: rgba(255, 255, 255, 0.4);

  /* ===================================================
     LAYOUT TOKENS
     Определяют структуру страницы — отступы, максимальные ширины.
     Используются и компонентами, и приложением для единой сетки.
  =================================================== */

  /* Горизонтальный padding страницы — меняется в @media ниже */
  --gm-layout-padding-x: 16px;
  --gm-layout-padding-y: 16px;

  /* Максимальные ширины контейнеров */
  --gm-layout-max-width: 1200px; /* страница целиком */
  --gm-layout-max-width-content: 640px; /* текстовый контент */

  /* ===================================================
     COMPONENT TOKENS: BANK CARD
  =================================================== */

  /* Dimensions */
  --gm-card-width: 294px; /* фиксированная ширина по умолчанию (Figma: 294×186) */
  --gm-card-aspect-ratio: 294 / 186; /* Figma design ratio */
  --gm-card-padding: var(--gm-spacing-md);
  --gm-card-radius: var(--gm-radius-2xl);

  /* Theme backgrounds */
  /* Card bg — единый для всех вариантов (per Figma Crypto Cards). */
  --gm-card-bg: var(--gm-bg-static-dark-elevated);

  /* Badge */
  --gm-card-badge-bg: var(--gm-color-grey-10);  /* Figma: rgba(160,160,181,0.10) */

  /* Text */
  --gm-card-label-color: var(--gm-color-grey);

  /* Skeleton */
  --gm-card-skeleton-bar-bg: var(--gm-bg-neutral-dark-10);
  --gm-card-skeleton-shimmer: var(--gm-bg-neutral-dark-20);
  --gm-card-skeleton-bar-radius: var(--gm-radius-xs);
  --gm-card-skeleton-duration: 1.4s;
  /* Skeleton bar dimensions (match elements они заменяют per Figma 294×186) */
  --gm-card-skeleton-badge-w: 56px;
  --gm-card-skeleton-badge-h: 20px;
  --gm-card-skeleton-number-w: 80%;
  --gm-card-skeleton-number-h: 20px;
  --gm-card-skeleton-label-w: 44px;
  --gm-card-skeleton-label-h: 10px;
  --gm-card-skeleton-value-w: 52px;
  --gm-card-skeleton-value-h: 14px;
  --gm-card-skeleton-network-w: 44px;
  --gm-card-skeleton-network-h: 16px;

  /* Card number typography */
  --gm-card-number-letter-spacing: 0;                               /* Figma: no letter-spacing */
  --gm-card-number-letter-spacing-compact: 0.04em;                  /* compact mode */
  --gm-card-info-gap: var(--gm-spacing-lg);                         /* 24 — between Expiry/CVV/Network */
  --gm-card-field-gap: var(--gm-spacing-xs);                        /* 4px between label and value */
  --gm-card-skeleton-field-gap: var(--gm-spacing-4);                /* 4px in skeleton */

  /* Card watermark (decorative GoMining glyph) */
  --gm-card-watermark-width: 162px;
  --gm-card-watermark-height: 162px;
  --gm-card-watermark-opacity: 0.12;

  /* Border */
  --gm-card-border-width: 1px;
  --gm-card-border-color: var(--gm-border-neutral-default);

  /* Compact-mode breakpoint */
  --gm-card-compact-max-width: 299px;

  /* Focus ring */
  --gm-card-focus-ring-width: var(--gm-focus-ring-width);
  --gm-card-focus-ring-offset: var(--gm-focus-ring-offset);

  /* Create variant — adaptive bg + border (auto-follows global theme).
     bg: page-surface (#181928 dark / #f7f8fa light).
     border: subtle 5% overlay (white-on-dark / dark-on-light). */
  --gm-card-create-bg: var(--gm-bg-base-surface);
  --gm-card-create-border-color: rgba(255, 255, 255, 0.05);

  --gm-card-create-fg: var(--gm-icon-neutral-default);
  --gm-card-create-hover-bg: var(--gm-bg-surface-subtle);
  --gm-card-create-focus-ring: var(--gm-bg-neutral-dark-40);

  /* ===================================================
     COMPONENT TOKENS: CAROUSEL
  =================================================== */

  --gm-carousel-gap: var(--gm-spacing-md);
  --gm-carousel-fade-width: 48px;
  --gm-carousel-fade-color: var(--gm-bg-base-surface);
  --gm-carousel-fade-dark: rgba(0, 0, 0, 0.8);
  --gm-carousel-fade-light: rgba(255, 255, 255, 0.85);
  --gm-carousel-arrow-size: 40px;
  --gm-carousel-arrow-bg: var(--gm-bg-neutral-dark-10);
  --gm-carousel-arrow-bg-hover: var(--gm-bg-neutral-dark-20);
  --gm-carousel-arrow-blur: 4px;
  --gm-carousel-arrow-disabled-opacity: 0.3;
  --gm-carousel-dot-size: 8px;
  --gm-carousel-dot-active-width: 24px;
  --gm-carousel-dot-color: var(--gm-bg-neutral-dark-20);
  --gm-carousel-dot-active-color: var(--gm-text-base-primary);
  --gm-carousel-dot-touch-offset: 8px;
  --gm-carousel-arrow-color: var(--gm-text-base-primary);

  /* ===================================================
     COMPONENT TOKENS: TOOLTIP — invariant (одинаковы в обеих темах)
  =================================================== */

  /* Body max-width by size (Figma) */
  --gm-tooltip-size-sm: 131px;
  --gm-tooltip-size-md: 196px;
  --gm-tooltip-size-lg: 256px;

  /* Arrow tip dimensions (Figma: long-axis × short-axis). */
  --gm-tooltip-arrow-long: 20px;
  --gm-tooltip-arrow-short: 8px;
}

/* ============================================================
   LIGHT THEME OVERRIDES
   Применяется когда <html class="light">.
   Соответствует механизму gmt-client (ThemeStore → html.light).
   Компоненты не нужно трогать — они реагируют автоматически.
   Only tokens that differ from dark theme are listed here.
============================================================ */

html.light {
  /* --- Background/Base --- */
  --gm-bg-base-base: #ffffff;
  --gm-bg-base-inverse: #0e0f1f;
  --gm-bg-base-surface: #f7f8fa;
  --gm-bg-base-elevated: #ffffff;
  --gm-bg-base-overlay: #ffffff;
  --gm-bg-base-input: #f7f8fa;

  /* --- Background/Neutral dark (swapped in light — dark-based) --- */
  --gm-bg-neutral-dark-100: rgba(14, 15, 31, 1);
  --gm-bg-neutral-dark-80: rgba(14, 15, 31, 0.80);
  --gm-bg-neutral-dark-40: rgba(14, 15, 31, 0.40);
  --gm-bg-neutral-dark-20: rgba(14, 15, 31, 0.20);
  --gm-bg-neutral-dark-10: rgba(14, 15, 31, 0.10);

  /* --- Background/Neutral light (swapped in light — white-based) --- */
  --gm-bg-neutral-light-100: rgba(255, 255, 255, 1);
  --gm-bg-neutral-light-80: rgba(255, 255, 255, 0.80);
  --gm-bg-neutral-light-40: rgba(255, 255, 255, 0.40);
  --gm-bg-neutral-light-20: rgba(255, 255, 255, 0.20);
  --gm-bg-neutral-light-10: rgba(255, 255, 255, 0.10);

  /* --- Background/Accent — Purple (light theme: lower opacity) --- */
  --gm-bg-accent-purple-xsubtle: rgba(117, 64, 239, 0.05);
  --gm-bg-accent-purple-subtle: rgba(117, 64, 239, 0.10);
  --gm-bg-accent-purple-default: rgba(117, 64, 239, 0.20);
  --gm-bg-accent-purple-strong: rgba(117, 64, 239, 0.30);

  /* --- Background/Accent — Yellow (light theme) --- */
  --gm-bg-accent-yellow-xsubtle: rgba(251, 167, 5, 0.05);
  --gm-bg-accent-yellow-subtle: rgba(251, 167, 5, 0.10);
  --gm-bg-accent-yellow-default: rgba(251, 167, 5, 0.20);
  --gm-bg-accent-yellow-strong: rgba(251, 167, 5, 0.30);

  /* --- Background/Accent — Green (light theme) --- */
  --gm-bg-accent-green-xsubtle: rgba(28, 204, 141, 0.05);
  --gm-bg-accent-green-subtle: rgba(28, 204, 141, 0.10);
  --gm-bg-accent-green-default: rgba(28, 204, 141, 0.20);
  --gm-bg-accent-green-strong: rgba(28, 204, 141, 0.30);

  /* --- Background/Accent — Red (light theme) --- */
  --gm-bg-accent-red-xsubtle: rgba(255, 43, 94, 0.05);
  --gm-bg-accent-red-subtle: rgba(255, 43, 94, 0.10);
  --gm-bg-accent-red-default: rgba(255, 43, 94, 0.20);
  --gm-bg-accent-red-strong: rgba(255, 43, 94, 0.30);

  /* --- Background/Accent — Pink (light theme) --- */
  --gm-bg-accent-pink-xsubtle: rgba(217, 77, 242, 0.05);
  --gm-bg-accent-pink-subtle: rgba(217, 77, 242, 0.10);
  --gm-bg-accent-pink-default: rgba(217, 77, 242, 0.20);
  --gm-bg-accent-pink-strong: rgba(217, 77, 242, 0.30);

  /* --- Background/Accent — Violet (light theme) --- */
  --gm-bg-accent-violet-xsubtle: rgba(171, 91, 250, 0.05);
  --gm-bg-accent-violet-subtle: rgba(171, 91, 250, 0.10);
  --gm-bg-accent-violet-default: rgba(171, 91, 250, 0.20);
  --gm-bg-accent-violet-strong: rgba(171, 91, 250, 0.30);

  /* --- Background/Accent — Blue (light theme) --- */
  --gm-bg-accent-blue-xsubtle: rgba(46, 149, 254, 0.05);
  --gm-bg-accent-blue-subtle: rgba(46, 149, 254, 0.10);
  --gm-bg-accent-blue-default: rgba(46, 149, 254, 0.20);
  --gm-bg-accent-blue-strong: rgba(46, 149, 254, 0.30);

  /* --- Background/Accent OnDark (light theme — colored, same as Accent) --- */
  --gm-bg-accent-ondark-purple-xsubtle: rgba(117, 64, 239, 0.05);
  --gm-bg-accent-ondark-purple-subtle: rgba(117, 64, 239, 0.10);
  --gm-bg-accent-ondark-purple-default: rgba(117, 64, 239, 0.20);
  --gm-bg-accent-ondark-purple-strong: rgba(117, 64, 239, 0.30);
  --gm-bg-accent-ondark-purple-solid: #7540ef;

  --gm-bg-accent-ondark-yellow-xsubtle: rgba(251, 167, 5, 0.05);
  --gm-bg-accent-ondark-yellow-subtle: rgba(251, 167, 5, 0.10);
  --gm-bg-accent-ondark-yellow-default: rgba(251, 167, 5, 0.20);
  --gm-bg-accent-ondark-yellow-strong: rgba(251, 167, 5, 0.30);
  --gm-bg-accent-ondark-yellow-solid: #fba705;

  --gm-bg-accent-ondark-green-xsubtle: rgba(28, 204, 141, 0.05);
  --gm-bg-accent-ondark-green-subtle: rgba(28, 204, 141, 0.10);
  --gm-bg-accent-ondark-green-default: rgba(28, 204, 141, 0.20);
  --gm-bg-accent-ondark-green-strong: rgba(28, 204, 141, 0.30);
  --gm-bg-accent-ondark-green-solid: #1ccc8d;

  --gm-bg-accent-ondark-red-xsubtle: rgba(255, 43, 94, 0.05);
  --gm-bg-accent-ondark-red-subtle: rgba(255, 43, 94, 0.10);
  --gm-bg-accent-ondark-red-default: rgba(255, 43, 94, 0.20);
  --gm-bg-accent-ondark-red-strong: rgba(255, 43, 94, 0.30);
  --gm-bg-accent-ondark-red-solid: #ff2b5e;

  --gm-bg-accent-ondark-pink-xsubtle: rgba(217, 77, 242, 0.05);
  --gm-bg-accent-ondark-pink-subtle: rgba(217, 77, 242, 0.10);
  --gm-bg-accent-ondark-pink-default: rgba(217, 77, 242, 0.20);
  --gm-bg-accent-ondark-pink-strong: rgba(217, 77, 242, 0.30);
  --gm-bg-accent-ondark-pink-solid: #d94df2;

  --gm-bg-accent-ondark-violet-xsubtle: rgba(171, 91, 250, 0.05);
  --gm-bg-accent-ondark-violet-subtle: rgba(171, 91, 250, 0.10);
  --gm-bg-accent-ondark-violet-default: rgba(171, 91, 250, 0.20);
  --gm-bg-accent-ondark-violet-strong: rgba(171, 91, 250, 0.30);
  --gm-bg-accent-ondark-violet-solid: #ab5bfa;

  --gm-bg-accent-ondark-blue-xsubtle: rgba(46, 149, 254, 0.05);
  --gm-bg-accent-ondark-blue-subtle: rgba(46, 149, 254, 0.10);
  --gm-bg-accent-ondark-blue-default: rgba(46, 149, 254, 0.20);
  --gm-bg-accent-ondark-blue-strong: rgba(46, 149, 254, 0.30);
  --gm-bg-accent-ondark-blue-solid: #2e95fe;

  /* --- Border/Inverse (light theme) --- */
  --gm-border-inverse-light: #ffffff;
  --gm-border-inverse-dark: #0e0f1f;
  --gm-border-inverse-surface: #f7f8fa;

  /* --- Border/Accent OnDark (light theme — colored) --- */
  --gm-border-accent-ondark-primary: #7540ef;
  --gm-border-accent-ondark-success: #1ccc8d;
  --gm-border-accent-ondark-warning: #fba705;
  --gm-border-accent-ondark-danger: #ff2b5e;
  --gm-border-accent-ondark-blue: #2e95fe;
  --gm-border-accent-ondark-pink: #d94df2;
  --gm-border-accent-ondark-violet: #ab5bfa;
  --gm-border-accent-ondark-grey: #a0a0b5;

  /* --- Icon/Neutral (light theme) --- */
  --gm-icon-neutral-dark: #0e0f1f;
  --gm-icon-neutral-inverse: #ffffff;

  /* --- Icon/Accent OnDark (light theme — colored) --- */
  --gm-icon-accent-ondark-primary: #7540ef;
  --gm-icon-accent-ondark-success: #1ccc8d;
  --gm-icon-accent-ondark-warning: #fba705;
  --gm-icon-accent-ondark-danger: #ff2b5e;
  --gm-icon-accent-ondark-pink: #c345da;
  --gm-icon-accent-ondark-violet: #ab5bfa;
  --gm-icon-accent-ondark-blue: #2e95fe;
  --gm-icon-accent-ondark-grey: #a0a0b5;

  /* --- Text/Base (light theme) --- */
  --gm-text-base-primary: #0e0f1f;
  --gm-text-base-inverse: #ffffff;
  --gm-text-base-inverse-secondary: rgba(255, 255, 255, 0.40);

  /* --- Text/Accent (light theme — Brand is regular purple) --- */
  --gm-text-accent-brand: #7540ef;

  /* --- Text/Accent OnDark (light theme — colored) --- */
  --gm-text-accent-ondark-brand: #7540ef;
  --gm-text-accent-ondark-success: #1ccc8d;
  --gm-text-accent-ondark-warning: #fba705;
  --gm-text-accent-ondark-danger: #ff2b5e;
  --gm-text-accent-ondark-blue: #2e95fe;
  --gm-text-accent-ondark-pink: #d94df2;
  --gm-text-accent-ondark-violet: #ab5bfa;
  --gm-text-accent-ondark-grey: #a0a0b5;

  /* --- Carousel — light overrides --- */
  --gm-carousel-arrow-bg: rgba(0, 0, 0, 0.08);
  --gm-carousel-arrow-bg-hover: rgba(0, 0, 0, 0.14);
  --gm-carousel-arrow-color: var(--gm-text-base-primary);
  --gm-carousel-dot-color: rgba(0, 0, 0, 0.25);
  --gm-carousel-dot-active-color: var(--gm-color-neutral-base);
  /* fade-color = page surface (для fade-gradient над items) */
  --gm-carousel-fade-color: var(--gm-bg-base-surface);

  /* --- Pay with Apple/Google Pay — light overrides ---
     На светлой теме button становится тёмным (Figma: #0E0F1F bg + white fg). */
  --gm-pay-with-btn-bg: var(--gm-color-neutral-base);
  --gm-pay-with-btn-fg: var(--gm-color-white);

  /* --- Section — light overrides ---
     Solid white card на tinted page (Figma: #F7F8FA → но это совпадает с
     дефолтной surface страницы; кладём #fff для видимого контраста). */
  --gm-section-bg: #ffffff;
  --gm-section-bg-hover: rgba(0, 0, 0, 0.03);
  --gm-section-bg-active: rgba(0, 0, 0, 0.06);

  /* --- Radio — light theme inverts disc colors per Figma 81:23301 ---
     Disc OFF (enabled & disabled) uses translucent grey-20 per Figma
     --selection-controls-checkbox-radiobutton-background-default = rgba(160,160,181,0.20).
     Disc ON inverts — purple на light, white на dark. */
  --gm-radio-bg-on: var(--gm-color-purple);
  --gm-radio-bg-off: var(--gm-color-grey-20);              /* Figma: rgba(160,160,181,0.20) */
  --gm-radio-bg-off-disabled: var(--gm-color-grey-20);     /* same — fade via opacity на disc-frame */
  --gm-radio-bg-on-disabled: var(--gm-color-purple);
  --gm-radio-dot-color: var(--gm-color-white);

  /* --- Input — re-declare adaptive chains so they re-resolve at this level.
     CSS var() chains are early-resolved at the setting element (:root),
     not the consuming element. Without re-declaration these tokens stay
     stuck at the dark-theme values.
     В light theme shell использует surface (recessed), не elevated —
     по Figma 40:6409 shell bg `#F7F8FA`. */
  --gm-input-bg-default: var(--gm-bg-base-surface);
  --gm-input-bg-disabled: var(--gm-bg-base-surface);
  --gm-input-text: var(--gm-text-base-primary);
  --gm-input-label-color: var(--gm-text-base-primary);

  /* Code Input — re-declare adaptive chains (см. html.light note выше) */
  --gm-code-input-bg-default: var(--gm-bg-base-input);
  --gm-code-input-bg-disabled: var(--gm-input-bg-disabled);
  --gm-code-input-text: var(--gm-text-base-primary);
  /* Focus stroke в light = фиолетовый (в dark = белый по :root default) */
  --gm-code-input-stroke-focus: var(--gm-color-purple);

  /* Checkout family — re-declare adaptive chains */
  --gm-price-row-label-color: var(--gm-text-base-primary);
  --gm-price-row-value-color: var(--gm-text-base-primary);
  --gm-payment-method-row-bg: var(--gm-bg-base-input);
  --gm-payment-method-row-bg-hover: var(--gm-bg-neutral-dark-10);
  --gm-payment-method-row-bg-selected: var(--gm-bg-neutral-dark-20);
  --gm-payment-method-row-label-color: var(--gm-text-base-primary);
  --gm-home-indicator-color: var(--gm-text-base-primary);

  /* Checkbox — re-declare adaptive chains.
     Light theme: bg-on = purple, glyph = white (классика checkbox UX). */
  --gm-checkbox-label-color: var(--gm-text-base-primary);
  --gm-checkbox-bg-on: var(--gm-color-purple);
  --gm-checkbox-bg-on-disabled: var(--gm-bg-accent-purple-strong);
  --gm-checkbox-glyph-color: var(--gm-color-white);

  /* Bank Card / Create — adaptive border on light page (dark overlay). */
  --gm-card-create-bg: var(--gm-bg-base-surface);
  --gm-card-create-border-color: rgba(14, 15, 31, 0.05);
}

/* ===================================================
   LAYOUT TOKENS — responsive overrides
   Единственное место в DS где живут breakpoints страницы.
   Приложение наследует их автоматически подключив tokens.css.
=================================================== */

/* Tablet: 768px+ */
@media (min-width: 768px) {
  :root {
    --gm-layout-padding-x: 24px;
    --gm-layout-padding-y: 24px;
  }
}

/* Desktop: 1024px+ */
@media (min-width: 1024px) {
  :root {
    --gm-layout-padding-x: 32px;
    --gm-layout-padding-y: 32px;
  }
}

/* ============================================================
   LOCAL THEME OVERRIDE — data-theme attribute
   Позволяет принудительно задать тему для любого элемента
   независимо от глобальной темы страницы.

   Как работает: CSS custom properties устанавливаются на самом
   элементе, поэтому они перекрывают унаследованные значения от
   html.light без конфликтов специфичности.

   Использование:
     <header data-theme="dark">…</header>   — тёмный блок в light-странице
     <section data-theme="light">…</section> — светлый блок в dark-странице

   Angular-директива (если нужна):
     @Directive({ selector: '[gmTheme]', host: { '[attr.data-theme]': 'gmTheme' } })
     export class GmThemeDirective { @Input() gmTheme: 'dark' | 'light' = 'dark'; }
============================================================ */

/* --- data-theme="dark": восстанавливает тёмную тему на элементе --- */
[data-theme="dark"] {
  /* Background/Base */
  --gm-bg-base-base: #0e0f1f;
  --gm-bg-base-inverse: #ffffff;
  --gm-bg-base-surface: #181928;
  --gm-bg-base-elevated: #181928;
  --gm-bg-base-overlay: #242533;
  --gm-bg-base-input: rgba(255, 255, 255, 0.05);

  /* Background/Neutral dark → white-based overlays */
  --gm-bg-neutral-dark-100: rgba(255, 255, 255, 1);
  --gm-bg-neutral-dark-80: rgba(255, 255, 255, 0.80);
  --gm-bg-neutral-dark-40: rgba(255, 255, 255, 0.40);
  --gm-bg-neutral-dark-20: rgba(255, 255, 255, 0.20);
  --gm-bg-neutral-dark-10: rgba(255, 255, 255, 0.10);

  /* Background/Neutral light → dark-based overlays */
  --gm-bg-neutral-light-100: rgba(14, 15, 31, 1);
  --gm-bg-neutral-light-80: rgba(14, 15, 31, 0.80);
  --gm-bg-neutral-light-40: rgba(14, 15, 31, 0.40);
  --gm-bg-neutral-light-20: rgba(14, 15, 31, 0.20);
  --gm-bg-neutral-light-10: rgba(14, 15, 31, 0.10);

  /* Background/Accent — dark theme opacity (higher) */
  --gm-bg-accent-purple-xsubtle: rgba(117, 64, 239, 0.10);
  --gm-bg-accent-purple-subtle: rgba(117, 64, 239, 0.20);
  --gm-bg-accent-purple-default: rgba(117, 64, 239, 0.30);
  --gm-bg-accent-purple-strong: rgba(117, 64, 239, 0.40);
  --gm-bg-accent-yellow-xsubtle: rgba(251, 167, 5, 0.10);
  --gm-bg-accent-yellow-subtle: rgba(251, 167, 5, 0.20);
  --gm-bg-accent-yellow-default: rgba(251, 167, 5, 0.30);
  --gm-bg-accent-yellow-strong: rgba(251, 167, 5, 0.40);
  --gm-bg-accent-green-xsubtle: rgba(28, 204, 141, 0.10);
  --gm-bg-accent-green-subtle: rgba(28, 204, 141, 0.20);
  --gm-bg-accent-green-default: rgba(28, 204, 141, 0.30);
  --gm-bg-accent-green-strong: rgba(28, 204, 141, 0.40);
  --gm-bg-accent-red-xsubtle: rgba(255, 43, 94, 0.10);
  --gm-bg-accent-red-subtle: rgba(255, 43, 94, 0.20);
  --gm-bg-accent-red-default: rgba(255, 43, 94, 0.30);
  --gm-bg-accent-red-strong: rgba(255, 43, 94, 0.40);
  --gm-bg-accent-pink-xsubtle: rgba(217, 77, 242, 0.10);
  --gm-bg-accent-pink-subtle: rgba(217, 77, 242, 0.20);
  --gm-bg-accent-pink-default: rgba(217, 77, 242, 0.30);
  --gm-bg-accent-pink-strong: rgba(217, 77, 242, 0.40);
  --gm-bg-accent-violet-xsubtle: rgba(171, 91, 250, 0.10);
  --gm-bg-accent-violet-subtle: rgba(171, 91, 250, 0.20);
  --gm-bg-accent-violet-default: rgba(171, 91, 250, 0.30);
  --gm-bg-accent-violet-strong: rgba(171, 91, 250, 0.40);
  --gm-bg-accent-blue-xsubtle: rgba(46, 149, 254, 0.10);
  --gm-bg-accent-blue-subtle: rgba(46, 149, 254, 0.20);
  --gm-bg-accent-blue-default: rgba(46, 149, 254, 0.30);
  --gm-bg-accent-blue-strong: rgba(46, 149, 254, 0.40);

  /* Background/Accent OnDark — dark theme = white-based */
  --gm-bg-accent-ondark-purple-xsubtle: rgba(255, 255, 255, 0.05);
  --gm-bg-accent-ondark-purple-subtle: rgba(255, 255, 255, 0.10);
  --gm-bg-accent-ondark-purple-default: rgba(255, 255, 255, 0.20);
  --gm-bg-accent-ondark-purple-strong: rgba(255, 255, 255, 0.30);
  --gm-bg-accent-ondark-purple-solid: #ffffff;
  --gm-bg-accent-ondark-yellow-xsubtle: rgba(255, 255, 255, 0.05);
  --gm-bg-accent-ondark-yellow-subtle: rgba(255, 255, 255, 0.10);
  --gm-bg-accent-ondark-yellow-default: rgba(255, 255, 255, 0.20);
  --gm-bg-accent-ondark-yellow-strong: rgba(255, 255, 255, 0.30);
  --gm-bg-accent-ondark-yellow-solid: #ffffff;
  --gm-bg-accent-ondark-green-xsubtle: rgba(255, 255, 255, 0.05);
  --gm-bg-accent-ondark-green-subtle: rgba(255, 255, 255, 0.10);
  --gm-bg-accent-ondark-green-default: rgba(255, 255, 255, 0.20);
  --gm-bg-accent-ondark-green-strong: rgba(255, 255, 255, 0.30);
  --gm-bg-accent-ondark-green-solid: #ffffff;
  --gm-bg-accent-ondark-red-xsubtle: rgba(255, 255, 255, 0.05);
  --gm-bg-accent-ondark-red-subtle: rgba(255, 255, 255, 0.10);
  --gm-bg-accent-ondark-red-default: rgba(255, 255, 255, 0.20);
  --gm-bg-accent-ondark-red-strong: rgba(255, 255, 255, 0.30);
  --gm-bg-accent-ondark-red-solid: #ffffff;
  --gm-bg-accent-ondark-pink-xsubtle: rgba(255, 255, 255, 0.05);
  --gm-bg-accent-ondark-pink-subtle: rgba(255, 255, 255, 0.10);
  --gm-bg-accent-ondark-pink-default: rgba(255, 255, 255, 0.20);
  --gm-bg-accent-ondark-pink-strong: rgba(255, 255, 255, 0.30);
  --gm-bg-accent-ondark-pink-solid: #ffffff;
  --gm-bg-accent-ondark-violet-xsubtle: rgba(255, 255, 255, 0.05);
  --gm-bg-accent-ondark-violet-subtle: rgba(255, 255, 255, 0.10);
  --gm-bg-accent-ondark-violet-default: rgba(255, 255, 255, 0.20);
  --gm-bg-accent-ondark-violet-strong: rgba(255, 255, 255, 0.30);
  --gm-bg-accent-ondark-violet-solid: #ffffff;
  --gm-bg-accent-ondark-blue-xsubtle: rgba(255, 255, 255, 0.05);
  --gm-bg-accent-ondark-blue-subtle: rgba(255, 255, 255, 0.10);
  --gm-bg-accent-ondark-blue-default: rgba(255, 255, 255, 0.20);
  --gm-bg-accent-ondark-blue-strong: rgba(255, 255, 255, 0.30);
  --gm-bg-accent-ondark-blue-solid: #ffffff;

  /* Border/Inverse */
  --gm-border-inverse-light: #0e0f1f;
  --gm-border-inverse-dark: #ffffff;
  --gm-border-inverse-surface: #181928;

  /* Border/Accent OnDark — dark theme = white */
  --gm-border-accent-ondark-primary: #ffffff;
  --gm-border-accent-ondark-success: #ffffff;
  --gm-border-accent-ondark-warning: #ffffff;
  --gm-border-accent-ondark-danger: #ffffff;
  --gm-border-accent-ondark-blue: #ffffff;
  --gm-border-accent-ondark-pink: #ffffff;
  --gm-border-accent-ondark-violet: #ffffff;
  --gm-border-accent-ondark-grey: #ffffff;

  /* Icon/Neutral */
  --gm-icon-neutral-dark: #ffffff;
  --gm-icon-neutral-inverse: #0e0f1f;

  /* Icon/Accent OnDark — dark theme = white */
  --gm-icon-accent-ondark-primary: #ffffff;
  --gm-icon-accent-ondark-success: #ffffff;
  --gm-icon-accent-ondark-warning: #ffffff;
  --gm-icon-accent-ondark-danger: #ffffff;
  --gm-icon-accent-ondark-pink: #ffffff;
  --gm-icon-accent-ondark-violet: #ffffff;
  --gm-icon-accent-ondark-blue: #ffffff;
  --gm-icon-accent-ondark-grey: #ffffff;

  /* Text/Base */
  --gm-text-base-primary: #ffffff;
  --gm-text-base-inverse: #0e0f1f;
  --gm-text-base-inverse-secondary: rgba(14, 15, 31, 0.40);

  /* Text/Accent */
  --gm-text-accent-brand: #693ad7;

  /* Text/Accent OnDark — dark theme = white */
  --gm-text-accent-ondark-brand: #ffffff;
  --gm-text-accent-ondark-success: #ffffff;
  --gm-text-accent-ondark-warning: #ffffff;
  --gm-text-accent-ondark-danger: #ffffff;
  --gm-text-accent-ondark-blue: #ffffff;
  --gm-text-accent-ondark-pink: #ffffff;
  --gm-text-accent-ondark-violet: #ffffff;
  --gm-text-accent-ondark-grey: #ffffff;

  /* Carousel */
  --gm-carousel-arrow-bg: var(--gm-bg-neutral-dark-10);
  --gm-carousel-arrow-bg-hover: var(--gm-bg-neutral-dark-20);
  --gm-carousel-arrow-color: var(--gm-text-base-primary);
  --gm-carousel-dot-color: var(--gm-bg-neutral-dark-20);
  --gm-carousel-dot-active-color: var(--gm-text-base-primary);
  --gm-carousel-fade-color: var(--gm-bg-base-surface);

  /* Input — re-declare adaptive chains (see html.light note) */
  --gm-input-bg-default: var(--gm-bg-base-elevated);
  --gm-input-bg-disabled: var(--gm-bg-base-elevated);
  --gm-input-text: var(--gm-text-base-primary);
  --gm-input-label-color: var(--gm-text-base-primary);

  /* Code Input — re-declare adaptive chains (см. html.light note) */
  --gm-code-input-bg-default: var(--gm-bg-base-input);
  --gm-code-input-bg-disabled: var(--gm-input-bg-disabled);
  --gm-code-input-text: var(--gm-text-base-primary);
  /* Focus stroke в dark = белый */
  --gm-code-input-stroke-focus: var(--gm-text-base-primary);

  /* Checkout family — re-declare adaptive chains */
  --gm-price-row-label-color: var(--gm-text-base-primary);
  --gm-price-row-value-color: var(--gm-text-base-primary);
  --gm-payment-method-row-bg: var(--gm-bg-base-input);
  --gm-payment-method-row-bg-hover: var(--gm-bg-neutral-dark-10);
  --gm-payment-method-row-bg-selected: var(--gm-bg-neutral-dark-20);
  --gm-payment-method-row-label-color: var(--gm-text-base-primary);
  --gm-home-indicator-color: var(--gm-text-base-primary);

  /* Checkbox — re-declare adaptive chains.
     Dark theme: bg-on = white, glyph = dark text. */
  --gm-checkbox-label-color: var(--gm-text-base-primary);
  --gm-checkbox-bg-on: var(--gm-color-white);
  --gm-checkbox-bg-on-disabled: rgba(255, 255, 255, 0.40);
  --gm-checkbox-glyph-color: var(--gm-text-static-dark);

  /* Bank Card / Create — re-declare for adaptive chain */
  --gm-card-create-bg: var(--gm-bg-base-surface);
  --gm-card-create-border-color: rgba(255, 255, 255, 0.05);
}

/* --- data-theme="light": применяет светлую тему на элементе --- */
[data-theme="light"] {
  /* Background/Base */
  --gm-bg-base-base: #ffffff;
  --gm-bg-base-inverse: #0e0f1f;
  --gm-bg-base-surface: #f7f8fa;
  --gm-bg-base-elevated: #ffffff;
  --gm-bg-base-overlay: #ffffff;
  --gm-bg-base-input: #f7f8fa;

  /* Background/Neutral dark (swapped) */
  --gm-bg-neutral-dark-100: rgba(14, 15, 31, 1);
  --gm-bg-neutral-dark-80: rgba(14, 15, 31, 0.80);
  --gm-bg-neutral-dark-40: rgba(14, 15, 31, 0.40);
  --gm-bg-neutral-dark-20: rgba(14, 15, 31, 0.20);
  --gm-bg-neutral-dark-10: rgba(14, 15, 31, 0.10);

  /* Background/Neutral light (swapped) */
  --gm-bg-neutral-light-100: rgba(255, 255, 255, 1);
  --gm-bg-neutral-light-80: rgba(255, 255, 255, 0.80);
  --gm-bg-neutral-light-40: rgba(255, 255, 255, 0.40);
  --gm-bg-neutral-light-20: rgba(255, 255, 255, 0.20);
  --gm-bg-neutral-light-10: rgba(255, 255, 255, 0.10);

  /* Background/Accent — light theme opacity (lower) */
  --gm-bg-accent-purple-xsubtle: rgba(117, 64, 239, 0.05);
  --gm-bg-accent-purple-subtle: rgba(117, 64, 239, 0.10);
  --gm-bg-accent-purple-default: rgba(117, 64, 239, 0.20);
  --gm-bg-accent-purple-strong: rgba(117, 64, 239, 0.30);
  --gm-bg-accent-yellow-xsubtle: rgba(251, 167, 5, 0.05);
  --gm-bg-accent-yellow-subtle: rgba(251, 167, 5, 0.10);
  --gm-bg-accent-yellow-default: rgba(251, 167, 5, 0.20);
  --gm-bg-accent-yellow-strong: rgba(251, 167, 5, 0.30);
  --gm-bg-accent-green-xsubtle: rgba(28, 204, 141, 0.05);
  --gm-bg-accent-green-subtle: rgba(28, 204, 141, 0.10);
  --gm-bg-accent-green-default: rgba(28, 204, 141, 0.20);
  --gm-bg-accent-green-strong: rgba(28, 204, 141, 0.30);
  --gm-bg-accent-red-xsubtle: rgba(255, 43, 94, 0.05);
  --gm-bg-accent-red-subtle: rgba(255, 43, 94, 0.10);
  --gm-bg-accent-red-default: rgba(255, 43, 94, 0.20);
  --gm-bg-accent-red-strong: rgba(255, 43, 94, 0.30);
  --gm-bg-accent-pink-xsubtle: rgba(217, 77, 242, 0.05);
  --gm-bg-accent-pink-subtle: rgba(217, 77, 242, 0.10);
  --gm-bg-accent-pink-default: rgba(217, 77, 242, 0.20);
  --gm-bg-accent-pink-strong: rgba(217, 77, 242, 0.30);
  --gm-bg-accent-violet-xsubtle: rgba(171, 91, 250, 0.05);
  --gm-bg-accent-violet-subtle: rgba(171, 91, 250, 0.10);
  --gm-bg-accent-violet-default: rgba(171, 91, 250, 0.20);
  --gm-bg-accent-violet-strong: rgba(171, 91, 250, 0.30);
  --gm-bg-accent-blue-xsubtle: rgba(46, 149, 254, 0.05);
  --gm-bg-accent-blue-subtle: rgba(46, 149, 254, 0.10);
  --gm-bg-accent-blue-default: rgba(46, 149, 254, 0.20);
  --gm-bg-accent-blue-strong: rgba(46, 149, 254, 0.30);

  /* Background/Accent OnDark — light theme = colored */
  --gm-bg-accent-ondark-purple-xsubtle: rgba(117, 64, 239, 0.05);
  --gm-bg-accent-ondark-purple-subtle: rgba(117, 64, 239, 0.10);
  --gm-bg-accent-ondark-purple-default: rgba(117, 64, 239, 0.20);
  --gm-bg-accent-ondark-purple-strong: rgba(117, 64, 239, 0.30);
  --gm-bg-accent-ondark-purple-solid: #7540ef;
  --gm-bg-accent-ondark-yellow-xsubtle: rgba(251, 167, 5, 0.05);
  --gm-bg-accent-ondark-yellow-subtle: rgba(251, 167, 5, 0.10);
  --gm-bg-accent-ondark-yellow-default: rgba(251, 167, 5, 0.20);
  --gm-bg-accent-ondark-yellow-strong: rgba(251, 167, 5, 0.30);
  --gm-bg-accent-ondark-yellow-solid: #fba705;
  --gm-bg-accent-ondark-green-xsubtle: rgba(28, 204, 141, 0.05);
  --gm-bg-accent-ondark-green-subtle: rgba(28, 204, 141, 0.10);
  --gm-bg-accent-ondark-green-default: rgba(28, 204, 141, 0.20);
  --gm-bg-accent-ondark-green-strong: rgba(28, 204, 141, 0.30);
  --gm-bg-accent-ondark-green-solid: #1ccc8d;
  --gm-bg-accent-ondark-red-xsubtle: rgba(255, 43, 94, 0.05);
  --gm-bg-accent-ondark-red-subtle: rgba(255, 43, 94, 0.10);
  --gm-bg-accent-ondark-red-default: rgba(255, 43, 94, 0.20);
  --gm-bg-accent-ondark-red-strong: rgba(255, 43, 94, 0.30);
  --gm-bg-accent-ondark-red-solid: #ff2b5e;
  --gm-bg-accent-ondark-pink-xsubtle: rgba(217, 77, 242, 0.05);
  --gm-bg-accent-ondark-pink-subtle: rgba(217, 77, 242, 0.10);
  --gm-bg-accent-ondark-pink-default: rgba(217, 77, 242, 0.20);
  --gm-bg-accent-ondark-pink-strong: rgba(217, 77, 242, 0.30);
  --gm-bg-accent-ondark-pink-solid: #d94df2;
  --gm-bg-accent-ondark-violet-xsubtle: rgba(171, 91, 250, 0.05);
  --gm-bg-accent-ondark-violet-subtle: rgba(171, 91, 250, 0.10);
  --gm-bg-accent-ondark-violet-default: rgba(171, 91, 250, 0.20);
  --gm-bg-accent-ondark-violet-strong: rgba(171, 91, 250, 0.30);
  --gm-bg-accent-ondark-violet-solid: #ab5bfa;
  --gm-bg-accent-ondark-blue-xsubtle: rgba(46, 149, 254, 0.05);
  --gm-bg-accent-ondark-blue-subtle: rgba(46, 149, 254, 0.10);
  --gm-bg-accent-ondark-blue-default: rgba(46, 149, 254, 0.20);
  --gm-bg-accent-ondark-blue-strong: rgba(46, 149, 254, 0.30);
  --gm-bg-accent-ondark-blue-solid: #2e95fe;

  /* Border/Inverse */
  --gm-border-inverse-light: #ffffff;
  --gm-border-inverse-dark: #0e0f1f;
  --gm-border-inverse-surface: #f7f8fa;

  /* Border/Accent OnDark — light theme = colored */
  --gm-border-accent-ondark-primary: #7540ef;
  --gm-border-accent-ondark-success: #1ccc8d;
  --gm-border-accent-ondark-warning: #fba705;
  --gm-border-accent-ondark-danger: #ff2b5e;
  --gm-border-accent-ondark-blue: #2e95fe;
  --gm-border-accent-ondark-pink: #d94df2;
  --gm-border-accent-ondark-violet: #ab5bfa;
  --gm-border-accent-ondark-grey: #a0a0b5;

  /* Icon/Neutral */
  --gm-icon-neutral-dark: #0e0f1f;
  --gm-icon-neutral-inverse: #ffffff;

  /* Icon/Accent OnDark — light theme = colored */
  --gm-icon-accent-ondark-primary: #7540ef;
  --gm-icon-accent-ondark-success: #1ccc8d;
  --gm-icon-accent-ondark-warning: #fba705;
  --gm-icon-accent-ondark-danger: #ff2b5e;
  --gm-icon-accent-ondark-pink: #c345da;
  --gm-icon-accent-ondark-violet: #ab5bfa;
  --gm-icon-accent-ondark-blue: #2e95fe;
  --gm-icon-accent-ondark-grey: #a0a0b5;

  /* Text/Base */
  --gm-text-base-primary: #0e0f1f;
  --gm-text-base-inverse: #ffffff;
  --gm-text-base-inverse-secondary: rgba(255, 255, 255, 0.40);

  /* Text/Accent */
  --gm-text-accent-brand: #7540ef;

  /* Text/Accent OnDark — light theme = colored */
  --gm-text-accent-ondark-brand: #7540ef;
  --gm-text-accent-ondark-success: #1ccc8d;
  --gm-text-accent-ondark-warning: #fba705;
  --gm-text-accent-ondark-danger: #ff2b5e;
  --gm-text-accent-ondark-blue: #2e95fe;
  --gm-text-accent-ondark-pink: #d94df2;
  --gm-text-accent-ondark-violet: #ab5bfa;
  --gm-text-accent-ondark-grey: #a0a0b5;

  /* ===================================================
     COMPONENT TOKENS: INPUT INFO BUTTON
     `[gmInputInfo]` — мелкая кнопка-«?» внутри label.
  =================================================== */

  --gm-input-info-button-size: 16px;
  --gm-input-info-focus-offset: 2px;
  --gm-input-balance-focus-offset: 2px;

  /* Carousel */
  --gm-carousel-arrow-bg: rgba(0, 0, 0, 0.08);
  --gm-carousel-arrow-bg-hover: rgba(0, 0, 0, 0.14);
  --gm-carousel-arrow-color: var(--gm-text-base-primary);
  --gm-carousel-dot-color: rgba(0, 0, 0, 0.25);
  --gm-carousel-dot-active-color: var(--gm-color-neutral-base);
  --gm-carousel-fade-color: var(--gm-bg-base-surface);

  /* Pay-with buttons — light overrides */
  --gm-pay-with-btn-bg: var(--gm-color-neutral-base);
  --gm-pay-with-btn-fg: var(--gm-color-white);

  /* Section — light overrides (см. html.light) */
  --gm-section-bg: #ffffff;
  --gm-section-bg-hover: rgba(0, 0, 0, 0.03);
  --gm-section-bg-active: rgba(0, 0, 0, 0.06);

  /* Radio — light theme inverts disc colors (см. html.light) */
  --gm-radio-bg-on: var(--gm-color-purple);
  --gm-radio-bg-off: var(--gm-color-grey-20);              /* Figma: rgba(160,160,181,0.20) */
  --gm-radio-bg-off-disabled: var(--gm-color-grey-20);     /* same — fade via opacity на disc-frame */
  --gm-radio-bg-on-disabled: var(--gm-color-purple);
  --gm-radio-dot-color: var(--gm-color-white);

  /* Input — re-declare adaptive chains (see html.light note).
     Light theme shell uses surface (recessed) per Figma 40:6409. */
  --gm-input-bg-default: var(--gm-bg-base-surface);
  --gm-input-bg-disabled: var(--gm-bg-base-surface);
  --gm-input-text: var(--gm-text-base-primary);
  --gm-input-label-color: var(--gm-text-base-primary);

  /* Code Input — re-declare adaptive chains (см. html.light note) */
  --gm-code-input-bg-default: var(--gm-bg-base-input);
  --gm-code-input-bg-disabled: var(--gm-input-bg-disabled);
  --gm-code-input-text: var(--gm-text-base-primary);
  /* Focus stroke в light = фиолетовый */
  --gm-code-input-stroke-focus: var(--gm-color-purple);

  /* Checkout family — re-declare adaptive chains */
  --gm-price-row-label-color: var(--gm-text-base-primary);
  --gm-price-row-value-color: var(--gm-text-base-primary);
  --gm-payment-method-row-bg: var(--gm-bg-base-input);
  --gm-payment-method-row-bg-hover: var(--gm-bg-neutral-dark-10);
  --gm-payment-method-row-bg-selected: var(--gm-bg-neutral-dark-20);
  --gm-payment-method-row-label-color: var(--gm-text-base-primary);
  --gm-home-indicator-color: var(--gm-text-base-primary);

  /* Checkbox — re-declare adaptive chains.
     Light theme: bg-on = purple, glyph = white. */
  --gm-checkbox-label-color: var(--gm-text-base-primary);
  --gm-checkbox-bg-on: var(--gm-color-purple);
  --gm-checkbox-bg-on-disabled: var(--gm-bg-accent-purple-strong);
  --gm-checkbox-glyph-color: var(--gm-color-white);

  /* Bank Card / Create — re-declare for adaptive chain */
  --gm-card-create-bg: var(--gm-bg-base-surface);
  --gm-card-create-border-color: rgba(14, 15, 31, 0.05);
}