/* ========================================================================
   DonateTeam — TOKENS + FONTS (self-hosted, source of truth)
   ======================================================================== */

/* IBM Plex Sans (400/600/700) */
@font-face{
  font-family:"IBM Plex Sans";
  src:url("/fonts/ibm-plex-sans/ibm-plex-sans-v23-cyrillic_latin-regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("/fonts/ibm-plex-sans/ibm-plex-sans-v23-cyrillic_latin-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("/fonts/ibm-plex-sans/ibm-plex-sans-v23-cyrillic_latin-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

/* Jura (400/600/700) */
@font-face{
  font-family:"Jura";
  src:url("/fonts/jura/jura-v34-cyrillic_latin-regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Jura";
  src:url("/fonts/jura/jura-v34-cyrillic_latin-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Jura";
  src:url("/fonts/jura/jura-v34-cyrillic_latin-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

/* (Опционально, под 404 заголовок) Orbitron Variable */
@font-face{
  font-family:"Orbitron";
  src:local("Orbitron"), local("Orbitron Variable");
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ========================================================================
   TOKENS — единые дизайн-переменные проекта
   ======================================================================== */
:root{
  /* ШРИФТЫ */
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading: "Jura", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-accent:  "Jura", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-ui:      var(--font-body);
  --font-display: var(--font-heading);

  /* Цвета */
  --bg:#0f0f0f; --panel:#151515; --panel-2:#111111;
  --text:#fff;  --muted:#bdbdbd;
  --brand:#a75eff; --brand-2:#8a3df6;
  --brand-soft:rgba(167,94,255,.35);

  /* Бордеры/радиусы/тени */
  --radius:16px; --radius-sm:8px;
  --border-soft:1px solid rgba(255,255,255,.06);
  --elev-1:0 6px 14px rgba(0,0,0,.35);
  --elev-2:0 14px 34px rgba(0,0,0,.42);

  /* Типографика */
  --h1:44px; --h2:34px; --h3:22px;
  --text-lg:18px; --text-md:16px; --text-sm:14px;
  --lh-base:1.55;

  /* Отступы */
  --space-0:0px; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:28px; --space-8:32px;
  --space-10:40px; --space-12:48px;

  /* Поверхности и эффекты */
  --panel-bg:var(--panel); --panel-bg-2:var(--panel-2);
  --card-shadow:0 8px 24px rgba(0,0,0,.35);
  --hover-veil:rgba(255,255,255,.05);

  /* Алиасы страницы игры */
  --game-bg:var(--bg);
  --game-panel:var(--panel);
  --game-panel-2:var(--panel-2);
  --game-text:var(--text);
  --game-muted:var(--muted);
  --game-brand:var(--brand);
  --game-brand-2:var(--brand-2);
  --game-brand-soft: color-mix(in srgb, var(--brand) 35%, transparent);
  --game-border:var(--border-soft);
  --game-shadow:var(--card-shadow);
  --game-radius:var(--radius);
  --game-h1:var(--h1); --game-h2:var(--h2); --game-h3:var(--h3);
  --game-text-lg:var(--text-lg); --game-text-md:var(--text-md); --game-text-sm:var(--text-sm);
  --game-lh-base:var(--lh-base);

  /* Прочее */
  --page-x:16px; --cart-w:300px; --card-min:240px; --logo:100px;
  --thumb:30px; --icon-text-lg:20px;
  --inner-stroke:0 0 0 1px rgba(255,255,255,.06) inset;
  --inner-stroke-strong:0 0 0 1px rgba(255,255,255,.10) inset;
  --brand-shadow-sm:0 6px 18px rgba(167,94,255,.25);
  --brand-shadow-md:0 8px 28px rgba(167,94,255,.35);
  --brand-shadow-lg:0 12px 42px rgba(167,94,255,.45);
  --grad-brand:linear-gradient(180deg, rgba(167,94,255,.25), rgba(167,94,255,0));
  --grad-neutral:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  --lift-xs:5px; --lift-sm:6px; --press-1:1px; --enter-shift:10px; --focus-ring:3px; --disabled-opacity:.5;
  --glow-radius-sm:4px; --tracking-tight:.5px;
  
  /* Активное состояние кнопок (как у поиска - интенсивный яркий бордюр) */
  --active-button-border:1.5px solid var(--brand);
  --active-button-shadow:
    0 0 0 2px var(--brand-soft),
    0 0 0 1.5px var(--brand) inset,
    0 0 14px var(--brand-soft);
  
  /* Ховер-эффекты для кнопок */
  --active-button-hover:
    inset 0 0 0 1.5px var(--brand),
    0 0 14px var(--brand-soft);
  --active-button-hover-soft:
    inset 0 0 0 1px var(--brand),
    0 0 8px var(--brand-soft);
  --active-button-hover-enhanced:
    0 0 20px var(--brand-soft),
    0 0 30px var(--brand-soft);
  
  /* Правила для правильного отображения бордюра без артефактов */
  --button-border-base: 1px solid rgba(255,255,255,.08);
  /* При hover НЕ меняем border, используем только box-shadow для эффекта бордюра */
  --button-hover-shadow: 
    inset 0 0 0 1px var(--brand),
    0 0 8px var(--brand-soft);
  
  /* Для неактивных кнопок при hover - только яркая рамка, без внешнего свечения */
  --button-hover-border-only:
    inset 0 0 0 1.5px var(--brand);
  
  /* Крестики закрытия - единый стиль (круглые кружки с подсветкой при наведении) */
  --close-btn-size: 32px;
  --close-btn-border-radius: 50%; /* Круглые */
  --close-btn-base-bg: rgba(255, 255, 255, 0.08);
  --close-btn-base-color: var(--muted);
  --close-btn-hover-bg: rgba(168, 85, 247, 0.15);
  --close-btn-hover-color: var(--brand);
  --close-btn-hover-shadow:
    inset 0 0 0 1px var(--brand),
    0 0 8px var(--brand-soft);
  
  /* Кнопки оплаты - единый стиль (как "Оплатить") */
  --pay-btn-base-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
  --pay-btn-active-shadow:
    inset 0 0 0 1.5px var(--brand),
    0 0 14px var(--brand-soft);
  --pay-btn-hover-enhanced:
    inset 0 0 0 1.5px var(--brand),
    0 0 14px var(--brand-soft),
    0 0 20px var(--brand-soft),
    0 0 30px var(--brand-soft);

  /* ======================================================================
     DonateTeam global interactive style tokens — Phase 1
     Shared source for primary CTA, selectable controls, fields and secondary actions.
     ====================================================================== */
  --dt-interactive-radius-sm: var(--radius-sm, 8px);
  --dt-interactive-radius-md: 10px;
  --dt-interactive-radius-lg: var(--radius, 16px);
  --dt-interactive-radius-pill: 999px;
  --dt-interactive-transition: 0.2s ease;
  --dt-interactive-transition-shadow: box-shadow var(--dt-interactive-transition), color var(--dt-interactive-transition), background var(--dt-interactive-transition), opacity var(--dt-interactive-transition), text-shadow var(--dt-interactive-transition);
  --dt-interactive-bg: var(--panel-2, #111111);
  --dt-interactive-fg: var(--text, #fff);
  --dt-interactive-muted-fg: var(--muted, #bdbdbd);
  --dt-interactive-accent: var(--brand, #a75eff);
  --dt-interactive-accent-soft: var(--brand-soft, rgba(167,94,255,.35));
  --dt-interactive-accent-soft-28: rgba(167,94,255,.28);
  --dt-interactive-accent-soft-24: rgba(167,94,255,.24);
  --dt-interactive-accent-soft-22: rgba(167,94,255,.22);
  --dt-interactive-accent-soft-18: rgba(167,94,255,.18);
  --dt-interactive-accent-soft-16: rgba(167,94,255,.16);
  --dt-interactive-accent-bright: color-mix(in srgb, var(--dt-interactive-accent) 88%, #fff 12%);
  --dt-interactive-text-bright: color-mix(in srgb, var(--dt-interactive-accent) 72%, #fff 28%);
  --dt-interactive-idle-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  --dt-interactive-border-shadow: inset 0 0 0 1.5px var(--dt-interactive-accent);
  --dt-interactive-border-shadow-bright: inset 0 0 0 1.5px var(--dt-interactive-accent-bright);
  --dt-control-radius-sm: var(--radius-sm, 8px);
  --dt-control-radius-md: 10px;
  --dt-control-radius-lg: var(--radius, 16px);
  --dt-control-transition-fast: .18s ease;
  --dt-control-transition-normal: var(--dt-interactive-transition);
  --dt-focus-color: rgba(197,162,255,.92);
  --dt-focus-shadow: var(--dt-interactive-border-shadow), 0 0 0 3px rgba(167,94,255,.22);
  --dt-disabled-opacity: .5;
  --dt-disabled-cursor: not-allowed;

  --dt-primary-idle-bg: var(--dt-interactive-bg);
  --dt-primary-idle-border: var(--dt-interactive-accent);
  --dt-primary-idle-text: var(--dt-interactive-accent);
  --dt-primary-idle-shadow: var(--dt-interactive-border-shadow), 0 0 14px var(--dt-interactive-accent-soft);
  --dt-primary-hover-bg: var(--dt-interactive-bg);
  --dt-primary-hover-border: var(--dt-interactive-accent);
  --dt-primary-hover-text: var(--dt-interactive-text-bright);
  --dt-primary-hover-shadow: var(--dt-interactive-border-shadow), 0 0 14px var(--dt-interactive-accent-soft), 0 0 20px var(--dt-interactive-accent-soft), 0 0 30px var(--dt-interactive-accent-soft);
  --dt-primary-pressed-bg: color-mix(in srgb, var(--dt-interactive-bg) 92%, #000 8%);
  --dt-primary-pressed-border: var(--dt-interactive-accent);
  --dt-primary-pressed-text: var(--dt-interactive-accent);
  --dt-primary-pressed-shadow: var(--dt-interactive-border-shadow), inset 0 2px 8px rgba(0,0,0,.32), 0 0 10px var(--dt-interactive-accent-soft-18);

  --dt-select-idle-bg: var(--dt-interactive-bg);
  --dt-select-idle-border: rgba(255,255,255,.06);
  --dt-select-idle-text: var(--dt-interactive-fg);
  --dt-select-idle-shadow: var(--dt-interactive-idle-shadow);
  --dt-select-hover-bg: var(--dt-interactive-bg);
  --dt-select-hover-border: var(--dt-interactive-accent);
  --dt-select-hover-text: var(--dt-interactive-accent);
  --dt-select-hover-shadow: var(--dt-interactive-border-shadow);
  --dt-select-selected-bg: var(--dt-interactive-bg);
  --dt-select-selected-border: var(--dt-interactive-accent);
  --dt-select-selected-text: var(--dt-interactive-accent);
  --dt-select-selected-shadow: var(--dt-primary-idle-shadow);
  --dt-select-selected-hover-bg: var(--dt-interactive-bg);
  --dt-select-selected-hover-border: var(--dt-interactive-accent-bright);
  --dt-select-selected-hover-text: var(--dt-interactive-text-bright);
  --dt-select-selected-hover-shadow: var(--dt-interactive-border-shadow-bright), 0 0 14px var(--dt-interactive-accent-soft-28), 0 0 20px var(--dt-interactive-accent-soft-22), 0 0 30px var(--dt-interactive-accent-soft-16);
  --dt-select-text-shadow: 0 0 12px var(--dt-interactive-accent-soft), 0 0 20px var(--dt-interactive-accent-soft);
  --dt-select-hover-text-shadow: 0 0 8px var(--dt-interactive-accent-soft);

  --dt-input-idle-bg: #121212;
  --dt-input-idle-border: rgba(167,94,255,.35);
  --dt-input-idle-text: var(--dt-interactive-fg);
  --dt-input-placeholder: rgba(255,255,255,.48);
  --dt-input-idle-shadow: inset 0 0 0 1.5px rgba(167,94,255,.35);
  --dt-input-hover-border: rgba(167,94,255,.56);
  --dt-input-hover-shadow: inset 0 0 0 1.5px rgba(167,94,255,.56);
  --dt-input-focus-border: var(--dt-interactive-accent);
  --dt-input-focus-shadow: var(--dt-interactive-border-shadow), 0 0 14px var(--dt-interactive-accent-soft);
  --dt-input-invalid-border: rgba(255,113,113,.82);
  --dt-input-invalid-shadow: inset 0 0 0 1.5px rgba(255,113,113,.82), 0 0 14px rgba(255,113,113,.18);
  --dt-input-disabled-bg: var(--dt-interactive-bg);
  --dt-input-disabled-border: rgba(255,255,255,.06);
  --dt-input-disabled-text: var(--dt-interactive-muted-fg);

  --dt-secondary-idle-bg: var(--dt-interactive-bg);
  --dt-secondary-idle-text: var(--dt-interactive-fg);
  --dt-secondary-idle-shadow: var(--dt-interactive-idle-shadow);
  --dt-secondary-hover-bg: var(--dt-interactive-bg);
  --dt-secondary-hover-text: var(--dt-interactive-accent);
  --dt-secondary-hover-shadow: var(--dt-interactive-control-hover-shadow);
  --dt-secondary-pressed-bg: color-mix(in srgb, var(--dt-interactive-bg) 92%, #000 8%);
  --dt-secondary-pressed-text: var(--dt-interactive-accent);
  --dt-secondary-pressed-shadow: var(--dt-primary-pressed-shadow);

  --dt-interactive-primary-idle-shadow: var(--dt-primary-idle-shadow);
  --dt-interactive-primary-hover-shadow: var(--dt-primary-hover-shadow);
  --dt-interactive-primary-active-shadow: var(--dt-primary-pressed-shadow);
  --dt-interactive-primary-active-bg: var(--dt-primary-pressed-bg);
  --dt-interactive-control-hover-shadow: var(--dt-select-hover-shadow);
  --dt-interactive-control-selected-shadow: var(--dt-select-selected-shadow);
  --dt-interactive-control-selected-hover-shadow: var(--dt-select-selected-hover-shadow);
  --dt-interactive-control-text-shadow: var(--dt-select-text-shadow);
  --dt-interactive-control-hover-text-shadow: var(--dt-select-hover-text-shadow);
  --dt-interactive-focus-outline: 2px solid var(--dt-focus-color);
  --dt-interactive-focus-outline-offset: 3px;
  --dt-interactive-focus-shadow: var(--dt-focus-shadow);
  --dt-interactive-field-bg: var(--dt-input-idle-bg);
  --dt-interactive-field-idle-shadow: var(--dt-input-idle-shadow);
  --dt-interactive-field-hover-shadow: var(--dt-input-hover-shadow);
  --dt-interactive-field-focus-shadow: var(--dt-input-focus-shadow);
  --dt-interactive-field-error-shadow: var(--dt-input-invalid-shadow);
  --dt-interactive-disabled-opacity: var(--dt-disabled-opacity);
  --dt-interactive-disabled-cursor: var(--dt-disabled-cursor);
  --dt-interactive-loading-shadow: var(--dt-select-hover-shadow);
  --dt-interactive-motion-transform: none;

  /* ======================================================================
     DonateTeam global game pages unification — Phase 2
     Game-page semantic control families. Values mirror current approved
     preview visuals; component geometry remains owned by component CSS.
     ====================================================================== */
  --dt-accordion-idle-bg: radial-gradient(circle at top left, rgba(167,94,255,.08), transparent 34%), linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)), var(--panel-bg);
  --dt-accordion-idle-border: rgba(255,255,255,.06);
  --dt-accordion-idle-text: #fff;
  --dt-accordion-idle-shadow: 0 14px 30px rgba(0,0,0,.18);
  --dt-accordion-hover-bg: var(--dt-accordion-idle-bg);
  --dt-accordion-hover-border: var(--dt-button-state-1-border-color, var(--dt-select-hover-border));
  --dt-accordion-hover-text: #f0e6ff;
  --dt-accordion-hover-shadow: var(--dt-accordion-idle-shadow);
  --dt-accordion-open-bg: var(--dt-accordion-idle-bg);
  --dt-accordion-open-border: var(--dt-accordion-hover-border);
  --dt-accordion-open-text: var(--dt-accordion-hover-text);
  --dt-accordion-open-shadow: var(--dt-accordion-idle-shadow);
  --dt-accordion-open-hover-bg: var(--dt-accordion-idle-bg);
  --dt-accordion-open-hover-border: var(--dt-accordion-hover-border);
  --dt-accordion-open-hover-text: var(--dt-accordion-hover-text);
  --dt-accordion-open-hover-shadow: var(--dt-accordion-idle-shadow);
  --dt-accordion-focus-shadow: inset 0 0 0 2px rgba(167,94,255,.28);
  --dt-accordion-icon-idle: #fff;
  --dt-accordion-icon-hover: #fff;
  --dt-accordion-icon-open: #fff;

  --dt-card-action-idle-bg: radial-gradient(120% 120% at 50% 0%, var(--game-brand) 0%, var(--game-brand-2) 65%);
  --dt-card-action-idle-text: var(--game-text);
  --dt-card-action-idle-shadow: 0 10px 26px var(--game-brand-soft), 0 0 0 1px rgba(255,255,255,.08) inset;
  --dt-card-action-hover-shadow: 0 14px 32px var(--game-brand-soft), 0 0 0 1px rgba(255,255,255,.10) inset;
  --dt-card-action-pressed-transform: none;
  --dt-card-action-transition: box-shadow .2s ease, filter .2s ease;

  --dt-quantity-bg: var(--game-panel-2);
  --dt-quantity-border: var(--game-border);
  --dt-quantity-radius: var(--game-radius);
  --dt-quantity-button-neutral-bg: linear-gradient(180deg,#2a2a2a,#232323);
  --dt-quantity-button-neutral-shadow: 0 6px 14px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
  --dt-quantity-button-accent-bg: radial-gradient(140% 140% at 50% 20%, var(--game-brand) 0 60%, var(--game-brand-2) 100%);
  --dt-quantity-button-accent-shadow: 0 6px 16px var(--game-brand-soft), 0 0 0 1px rgba(255,255,255,.06) inset;
  --dt-quantity-transition: box-shadow .2s ease, filter .2s ease;

  --dt-destructive-clear-idle-bg: transparent;
  --dt-destructive-clear-hover-bg: rgba(255,255,255,.05);
  --dt-destructive-clear-idle-icon: var(--game-muted);
  --dt-destructive-clear-hover-icon: #ff5555;
  --dt-destructive-clear-transition: background .2s ease, transform .2s ease;
  --dt-destructive-clear-transform: none;

  --dt-help-badge-idle-bg: rgba(12,12,16,.92);
  --dt-help-badge-idle-text: var(--game-brand);
  --dt-help-badge-idle-shadow: 0 0 0 1px color-mix(in srgb, var(--game-brand) 46%, transparent) inset, 0 8px 20px rgba(0,0,0,.32);
  --dt-help-badge-hover-bg: rgba(18,18,24,.96);
  --dt-help-badge-hover-shadow: 0 0 0 1px color-mix(in srgb, var(--game-brand) 72%, transparent) inset, 0 10px 24px color-mix(in srgb, var(--game-brand) 24%, transparent);
  --dt-help-badge-focus-shadow: var(--dt-help-badge-hover-shadow);

  --dt-product-surface-hover-outline: var(--dt-button-state-1-border-color, color-mix(in srgb, var(--game-brand) 48%, #2e2e2e));
  --dt-product-surface-hover-shadow: var(--game-shadow);
  --dt-product-surface-focus-outline: 2px solid color-mix(in srgb, var(--game-brand) 60%, transparent);
  --dt-product-surface-focus-outline-offset: 3px;

  /* Backward-compatible aliases for already deployed components. */
  --pay-btn-active-shadow: var(--dt-interactive-primary-idle-shadow);
  --pay-btn-hover-enhanced: var(--dt-interactive-primary-hover-shadow);
  --button-hover-border-only: var(--dt-interactive-control-hover-shadow);
  --button-hover-shadow: var(--dt-interactive-control-hover-shadow);
  --active-button-hover: var(--dt-interactive-control-selected-shadow);
  --active-button-hover-enhanced: var(--dt-interactive-primary-hover-shadow);

}

/* ========================================================================
   TYPOGRAPHY BASELINE (общая)
   ======================================================================== */
html{ font-size:16px; }
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-body); line-height:var(--lh-base);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
*, *::before, *::after{ font-family: inherit; }

/* Заголовки всегда на Jura */
h1,.h1{ font-family:var(--font-heading); font-weight:700; font-size:var(--h1); letter-spacing:.3px; }
h2,.h2{ font-family:var(--font-heading); font-weight:600; font-size:var(--h2); letter-spacing:.2px; }
h3,.h3{ font-family:var(--font-heading); font-weight:600; font-size:var(--h3); }

/* Доступность/меньше движения */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ========================================================================
   DonateTeam Stage 1 interactive state tokens (declaration-only)
   Source: sitewide_interactive_states_audit_20260701 canonical evidence.
   These variables are intentionally not consumed by existing selectors yet.
   ======================================================================== */
:root{
  /* Controls / tabs: SWGOH category filters, desktop canonical evidence. */
  --dt-control-radius:16px;
  --dt-control-padding:12px 20px;
  --dt-control-border-width:0px;
  --dt-control-border-style:none;
  --dt-control-font-family:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --dt-control-font-size:16px;
  --dt-control-font-weight:400;
  --dt-control-line-height:24.8px;
  --dt-control-letter-spacing:normal;
  --dt-control-transition:0.2s;
  --dt-control-transform:none;
  --dt-control-idle-background:rgb(17, 17, 17);
  --dt-control-idle-color:rgb(255, 255, 255);
  --dt-control-idle-border-color:rgb(255, 255, 255);
  --dt-control-idle-shadow:rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset;
  --dt-control-idle-outline:rgb(255, 255, 255) none 3px;
  --dt-control-hover-background:rgb(17, 17, 17);
  --dt-control-hover-color:rgb(167, 94, 255);
  --dt-control-hover-border-color:rgb(167, 94, 255);
  --dt-control-hover-shadow:rgb(167, 94, 255) 0px 0px 0px 1.5px inset;
  --dt-control-hover-outline:rgb(167, 94, 255) none 3px;
  --dt-control-selected-background:rgb(17, 17, 17);
  --dt-control-selected-color:rgb(167, 94, 255);
  --dt-control-selected-border-color:rgb(167, 94, 255);
  --dt-control-selected-shadow:rgb(167, 94, 255) 0px 0px 0px 1.5px inset, rgba(167, 94, 255, 0.35) 0px 0px 14px 0px;
  --dt-control-selected-text-shadow:rgba(167, 94, 255, 0.35) 0px 0px 12px, rgba(167, 94, 255, 0.35) 0px 0px 20px;
  --dt-control-selected-outline:rgb(167, 94, 255) none 3px;
  --dt-control-selected-hover-background:rgb(17, 17, 17);
  --dt-control-selected-hover-color:rgb(167, 94, 255);
  --dt-control-selected-hover-border-color:rgb(167, 94, 255);
  --dt-control-selected-hover-shadow:rgb(167, 94, 255) 0px 0px 0px 1.5px inset, rgba(167, 94, 255, 0.35) 0px 0px 14px 0px, rgba(167, 94, 255, 0.35) 0px 0px 20px 0px, rgba(167, 94, 255, 0.35) 0px 0px 30px 0px;
  --dt-control-selected-hover-text-shadow:rgba(167, 94, 255, 0.35) 0px 0px 12px, rgba(167, 94, 255, 0.35) 0px 0px 20px;
  --dt-control-selected-hover-outline:rgb(167, 94, 255) none 3px;
  --dt-control-pressed-background:rgb(17, 17, 17);
  --dt-control-pressed-color:rgb(255, 255, 255);
  --dt-control-pressed-border-color:rgb(255, 255, 255);
  --dt-control-pressed-shadow:rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset;
  --dt-control-pressed-outline:rgb(255, 255, 255) none 3px;
  --dt-control-focus-visible-background:rgb(17, 17, 17);
  --dt-control-focus-visible-color:rgb(167, 94, 255);
  --dt-control-focus-visible-border-color:rgb(167, 94, 255);
  --dt-control-focus-visible-shadow:rgb(167, 94, 255) 0px 0px 0px 1.5px inset;
  --dt-control-focus-visible-outline:oklab(0.642589 0.118084 -0.196668 / 0.679043) solid 2px;
  --dt-control-focus-visible-outline-offset:1px;
  --dt-control-hero-action-focus-visible-outline:2px solid rgb(167, 94, 255);
  --dt-control-hero-action-focus-visible-outline-offset:3px;

  /* Cards: homepage game card canonical evidence. */
  --dt-card-radius:18px;
  --dt-card-padding:12px;
  --dt-card-font-family:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --dt-card-font-size:16px;
  --dt-card-font-weight:400;
  --dt-card-line-height:24.8px;
  --dt-card-letter-spacing:normal;
  --dt-card-transition:border-color 0.2s, box-shadow 0.2s, filter 0.2s;
  --dt-card-transform:none;
  --dt-card-idle-background:rgb(21, 21, 21);
  --dt-card-idle-color:rgb(255, 255, 255);
  --dt-card-idle-border:1px solid rgba(255, 255, 255, 0.06);
  --dt-card-idle-shadow:rgba(0, 0, 0, 0.35) 0px 8px 24px 0px;
  --dt-card-idle-outline:rgb(255, 255, 255) none 3px;
  --dt-card-hover-background:rgb(21, 21, 21);
  --dt-card-hover-color:rgb(255, 255, 255);
  --dt-card-hover-border:1px solid rgba(168, 95, 255, 0.882);
  --dt-card-hover-shadow:rgba(0, 0, 0, 0.35) 0px 8px 24px 0px;
  --dt-card-hover-outline:rgb(255, 255, 255) none 3px;
  --dt-card-focus-visible-background:rgb(21, 21, 21);
  --dt-card-focus-visible-color:rgb(255, 255, 255);
  --dt-card-focus-visible-border:1px solid rgb(167, 94, 255);
  --dt-card-focus-visible-shadow:rgba(0, 0, 0, 0.35) 0px 8px 24px 0px;
  --dt-card-focus-visible-outline:color(srgb 0.654902 0.368627 1 / 0.6) solid 2px;
  --dt-card-focus-visible-outline-offset:3px;

  /* Fields: homepage search input and visual wrapper are separate. */
  --dt-field-input-background:rgba(0, 0, 0, 0);
  --dt-field-input-color:rgb(255, 255, 255);
  --dt-field-input-border:0px none rgb(255, 255, 255);
  --dt-field-input-shadow:none;
  --dt-field-input-outline:rgb(255, 255, 255) none 0px;
  --dt-field-input-radius:0px;
  --dt-field-input-font-family:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --dt-field-input-font-size:16px;
  --dt-field-input-font-weight:400;
  --dt-field-input-line-height:24.8px;
  --dt-field-input-letter-spacing:normal;
  --dt-field-input-caret-color:rgb(255, 255, 255);
  --dt-field-input-transition:all;
  --dt-field-input-transform:none;
  --dt-field-wrapper-radius:10px;
  --dt-field-wrapper-padding:0px 12px;
  --dt-field-wrapper-focus-within-background:rgb(18, 18, 18);
  --dt-field-wrapper-focus-within-color:rgb(255, 255, 255);
  --dt-field-wrapper-focus-within-border:0px none rgb(255, 255, 255);
  --dt-field-wrapper-focus-within-shadow:rgb(167, 94, 255) 0px 0px 0px 1.5px inset, rgba(167, 94, 255, 0.35) 0px 0px 14px 0px;
  --dt-field-wrapper-focus-within-outline:rgb(255, 255, 255) none 3px;
  --dt-field-wrapper-transition:all;
  --dt-field-wrapper-transform:none;

  /* Motion primitives confirmed by canonical evidence. */
  --dt-motion-hover-transform:none;
  --dt-motion-active-transform:none;
  --dt-motion-focus-visible-transform:none;
  --dt-motion-control-transition:0.2s;
  --dt-motion-card-transition:border-color 0.2s, box-shadow 0.2s, filter 0.2s;
  --dt-motion-field-transition:all;
  --dt-motion-control-border-width:0px;
  --dt-motion-card-border-width:1px;
  --dt-motion-field-input-border-width:0px;
}

/* DonateTeam hero CTA and homepage navigation semantic aliases - Phase 3 pilot.
   Tokens define visual state only. Component geometry, typography and layout stay in component CSS. */
:root{
  --dt-hero-primary-idle-bg: var(--dt-primary-idle-bg);
  --dt-hero-primary-idle-border: var(--dt-primary-idle-border);
  --dt-hero-primary-idle-text: var(--dt-primary-idle-text);
  --dt-hero-primary-idle-shadow: var(--dt-primary-idle-shadow);
  --dt-hero-primary-hover-bg: var(--dt-primary-hover-bg);
  --dt-hero-primary-hover-border: var(--dt-primary-hover-border);
  --dt-hero-primary-hover-text: var(--dt-primary-hover-text);
  --dt-hero-primary-hover-shadow: var(--dt-interactive-border-shadow), 0 0 14px var(--dt-interactive-accent-soft-28), 0 0 20px var(--dt-interactive-accent-soft-18);
  --dt-hero-primary-pressed-bg: var(--dt-primary-pressed-bg);
  --dt-hero-primary-pressed-border: var(--dt-primary-pressed-border);
  --dt-hero-primary-pressed-text: var(--dt-primary-pressed-text);
  --dt-hero-primary-pressed-shadow: var(--dt-primary-pressed-shadow);

  --dt-hero-secondary-idle-bg: linear-gradient(180deg, rgba(167,94,255,.07), rgba(255,255,255,.032)), rgba(18,18,22,.72);
  --dt-hero-secondary-idle-border: rgba(167,94,255,.34);
  --dt-hero-secondary-idle-text: color-mix(in srgb, var(--dt-interactive-fg, #fff) 84%, var(--dt-interactive-accent, #a75eff) 16%);
  --dt-hero-secondary-idle-shadow: inset 0 0 0 1px rgba(167,94,255,.20), 0 10px 24px rgba(0,0,0,.18);
  --dt-hero-secondary-hover-bg: linear-gradient(180deg, rgba(167,94,255,.12), rgba(255,255,255,.042)), rgba(18,18,22,.74);
  --dt-hero-secondary-hover-border: rgba(167,94,255,.58);
  --dt-hero-secondary-hover-text: color-mix(in srgb, var(--dt-interactive-fg, #fff) 74%, var(--dt-interactive-accent, #a75eff) 26%);
  --dt-hero-secondary-hover-shadow: inset 0 0 0 1px rgba(167,94,255,.42), 0 0 12px rgba(167,94,255,.18), 0 10px 24px rgba(0,0,0,.18);
  --dt-hero-secondary-pressed-bg: linear-gradient(180deg, rgba(167,94,255,.075), rgba(255,255,255,.022)), rgba(13,13,16,.76);
  --dt-hero-secondary-pressed-border: rgba(167,94,255,.50);
  --dt-hero-secondary-pressed-text: var(--dt-interactive-accent, #a75eff);
  --dt-hero-secondary-pressed-shadow: inset 0 2px 8px rgba(0,0,0,.30), inset 0 0 0 1px rgba(167,94,255,.36), 0 0 10px rgba(167,94,255,.13);

  --dt-home-nav-idle-bg: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
  --dt-home-nav-idle-border: rgba(255,255,255,.12);
  --dt-home-nav-idle-text: rgba(255,255,255,.92);
  --dt-home-nav-idle-shadow: 0 10px 22px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.02);
  --dt-home-nav-hover-bg: var(--dt-hero-secondary-hover-bg);
  --dt-home-nav-hover-border: var(--dt-hero-secondary-hover-border);
  --dt-home-nav-hover-text: var(--dt-hero-secondary-hover-text);
  --dt-home-nav-hover-shadow: inset 0 0 0 1px rgba(167,94,255,.34), 0 0 10px rgba(167,94,255,.14), 0 10px 22px rgba(0,0,0,.18);
  --dt-home-nav-pressed-bg: var(--dt-hero-secondary-pressed-bg);
  --dt-home-nav-pressed-border: var(--dt-hero-secondary-pressed-border);
  --dt-home-nav-pressed-text: var(--dt-hero-secondary-pressed-text);
  --dt-home-nav-pressed-shadow: var(--dt-hero-secondary-pressed-shadow);

  --dt-home-nav-promo-idle-bg: linear-gradient(180deg, rgba(167,94,255,.18), rgba(255,255,255,.04));
  --dt-home-nav-promo-idle-border: rgba(167,94,255,.42);
  --dt-home-nav-promo-idle-text: #fff;
  --dt-home-nav-promo-idle-shadow: 0 10px 22px rgba(103,64,255,.13), inset 0 0 0 1px rgba(255,255,255,.03);
  --dt-home-nav-promo-hover-bg: var(--dt-button-state-2-background);
  --dt-home-nav-promo-hover-border: var(--dt-button-state-3-border-color);
  --dt-home-nav-promo-hover-text: var(--dt-button-state-3-color);
  --dt-home-nav-promo-hover-shadow: 0 0 16px var(--dt-interactive-accent-soft-24), 0 12px 26px rgba(103,64,255,.16);

  --dt-account-entry-idle-bg: radial-gradient(circle at top left, rgba(167,94,255,.12), transparent 48%), linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)), rgba(18,18,22,.92);
  --dt-account-entry-idle-border: rgba(255,255,255,.10);
  --dt-account-entry-idle-shadow: 0 10px 24px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.02);
  --dt-account-entry-hover-bg: var(--dt-home-nav-hover-bg);
  --dt-account-entry-hover-border: var(--dt-home-nav-hover-border);
  --dt-account-entry-hover-text: var(--dt-home-nav-hover-text);
  --dt-account-entry-hover-shadow: var(--dt-home-nav-hover-shadow);
}

/* DonateTeam hero CTA brand strength refine - Phase 3 follow-up.
   Scope: hero primary/secondary CTA visual tokens only. Home nav aliases are pinned
   to the previous pilot recipe below so this refinement does not alter homepage nav. */
:root{
  --dt-hero-primary-idle-bg: linear-gradient(180deg, rgba(167,94,255,.085), rgba(255,255,255,.018)), #0d0d12;
  --dt-hero-primary-idle-border: color-mix(in srgb, var(--dt-interactive-accent, #a75eff) 92%, #fff 8%);
  --dt-hero-primary-idle-text: color-mix(in srgb, var(--dt-interactive-accent, #a75eff) 82%, #fff 18%);
  --dt-hero-primary-idle-shadow: inset 0 0 0 1.5px rgba(167,94,255,.92), 0 0 14px rgba(167,94,255,.32), 0 10px 24px rgba(0,0,0,.24);
  --dt-hero-primary-hover-bg: linear-gradient(180deg, rgba(167,94,255,.13), rgba(255,255,255,.025)), #0d0d12;
  --dt-hero-primary-hover-border: color-mix(in srgb, var(--dt-interactive-accent, #a75eff) 86%, #fff 14%);
  --dt-hero-primary-hover-text: color-mix(in srgb, var(--dt-interactive-accent, #a75eff) 72%, #fff 28%);
  --dt-hero-primary-hover-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--dt-interactive-accent, #a75eff) 86%, #fff 14%), 0 0 16px rgba(167,94,255,.36), 0 0 24px rgba(167,94,255,.20), 0 10px 24px rgba(0,0,0,.24);
  --dt-hero-primary-pressed-bg: linear-gradient(180deg, rgba(167,94,255,.07), rgba(0,0,0,.08)), #09090d;
  --dt-hero-primary-pressed-border: rgba(167,94,255,.84);
  --dt-hero-primary-pressed-text: var(--dt-interactive-accent, #a75eff);
  --dt-hero-primary-pressed-shadow: inset 0 2px 8px rgba(0,0,0,.34), inset 0 0 0 1.5px rgba(167,94,255,.74), 0 0 12px rgba(167,94,255,.20);

  --dt-hero-secondary-idle-bg: linear-gradient(180deg, rgba(167,94,255,.055), rgba(255,255,255,.018)), #0f0f14;
  --dt-hero-secondary-idle-border: rgba(167,94,255,.52);
  --dt-hero-secondary-idle-text: color-mix(in srgb, var(--dt-interactive-fg, #fff) 88%, var(--dt-interactive-accent, #a75eff) 12%);
  --dt-hero-secondary-idle-shadow: inset 0 0 0 1px rgba(167,94,255,.38), 0 0 10px rgba(167,94,255,.16), 0 10px 24px rgba(0,0,0,.20);
  --dt-hero-secondary-hover-bg: linear-gradient(180deg, rgba(167,94,255,.095), rgba(255,255,255,.022)), #0f0f14;
  --dt-hero-secondary-hover-border: rgba(167,94,255,.72);
  --dt-hero-secondary-hover-text: color-mix(in srgb, var(--dt-interactive-fg, #fff) 78%, var(--dt-interactive-accent, #a75eff) 22%);
  --dt-hero-secondary-hover-shadow: inset 0 0 0 1px rgba(167,94,255,.56), 0 0 14px rgba(167,94,255,.24), 0 10px 24px rgba(0,0,0,.20);
  --dt-hero-secondary-pressed-bg: linear-gradient(180deg, rgba(167,94,255,.05), rgba(0,0,0,.08)), #0a0a0e;
  --dt-hero-secondary-pressed-border: rgba(167,94,255,.62);
  --dt-hero-secondary-pressed-text: var(--dt-interactive-accent, #a75eff);
  --dt-hero-secondary-pressed-shadow: inset 0 2px 8px rgba(0,0,0,.32), inset 0 0 0 1px rgba(167,94,255,.46), 0 0 10px rgba(167,94,255,.15);

  --dt-home-nav-hover-bg: linear-gradient(180deg, rgba(167,94,255,.12), rgba(255,255,255,.042)), rgba(18,18,22,.74);
  --dt-home-nav-hover-border: rgba(167,94,255,.58);
  --dt-home-nav-hover-text: color-mix(in srgb, var(--dt-interactive-fg, #fff) 74%, var(--dt-interactive-accent, #a75eff) 26%);
  --dt-home-nav-hover-shadow: inset 0 0 0 1px rgba(167,94,255,.34), 0 0 10px rgba(167,94,255,.14), 0 10px 22px rgba(0,0,0,.18);
  --dt-home-nav-pressed-bg: linear-gradient(180deg, rgba(167,94,255,.075), rgba(255,255,255,.022)), rgba(13,13,16,.76);
  --dt-home-nav-pressed-border: rgba(167,94,255,.50);
  --dt-home-nav-pressed-text: var(--dt-interactive-accent, #a75eff);
  --dt-home-nav-pressed-shadow: inset 0 2px 8px rgba(0,0,0,.30), inset 0 0 0 1px rgba(167,94,255,.36), 0 0 10px rgba(167,94,255,.13);
}

/* DonateTeam hero experiment normalization - map experiment aliases back to global tokens.
   Compatibility aliases remain so page selectors keep working, but visual recipes now use
   accepted global primary, secondary and selectable/control token families. */
:root{
  --dt-hero-primary-idle-bg: var(--dt-primary-idle-bg);
  --dt-hero-primary-idle-border: var(--dt-primary-idle-border);
  --dt-hero-primary-idle-text: var(--dt-primary-idle-text);
  --dt-hero-primary-idle-shadow: var(--dt-primary-idle-shadow);
  --dt-hero-primary-hover-bg: var(--dt-primary-hover-bg);
  --dt-hero-primary-hover-border: var(--dt-primary-hover-border);
  --dt-hero-primary-hover-text: var(--dt-primary-hover-text);
  --dt-hero-primary-hover-shadow: var(--dt-primary-hover-shadow);
  --dt-hero-primary-pressed-bg: var(--dt-primary-pressed-bg);
  --dt-hero-primary-pressed-border: var(--dt-primary-pressed-border);
  --dt-hero-primary-pressed-text: var(--dt-primary-pressed-text);
  --dt-hero-primary-pressed-shadow: var(--dt-primary-pressed-shadow);

  --dt-hero-secondary-idle-bg: var(--dt-secondary-idle-bg);
  --dt-hero-secondary-idle-border: var(--dt-select-idle-border);
  --dt-hero-secondary-idle-text: var(--dt-secondary-idle-text);
  --dt-hero-secondary-idle-shadow: var(--dt-secondary-idle-shadow);
  --dt-hero-secondary-hover-bg: var(--dt-secondary-hover-bg);
  --dt-hero-secondary-hover-border: var(--dt-select-hover-border);
  --dt-hero-secondary-hover-text: var(--dt-secondary-hover-text);
  --dt-hero-secondary-hover-shadow: var(--dt-secondary-hover-shadow);
  --dt-hero-secondary-pressed-bg: var(--dt-secondary-pressed-bg);
  --dt-hero-secondary-pressed-border: var(--dt-select-hover-border);
  --dt-hero-secondary-pressed-text: var(--dt-secondary-pressed-text);
  --dt-hero-secondary-pressed-shadow: var(--dt-secondary-pressed-shadow);

  --dt-home-nav-idle-bg: var(--dt-select-idle-bg);
  --dt-home-nav-idle-border: var(--dt-select-idle-border);
  --dt-home-nav-idle-text: var(--dt-select-idle-text);
  --dt-home-nav-idle-shadow: var(--dt-select-idle-shadow);
  --dt-home-nav-hover-bg: var(--dt-select-hover-bg);
  --dt-home-nav-hover-border: var(--dt-select-hover-border);
  --dt-home-nav-hover-text: var(--dt-select-hover-text);
  --dt-home-nav-hover-shadow: var(--dt-select-hover-shadow);
  --dt-home-nav-pressed-bg: var(--dt-secondary-pressed-bg);
  --dt-home-nav-pressed-border: var(--dt-select-hover-border);
  --dt-home-nav-pressed-text: var(--dt-secondary-pressed-text);
  --dt-home-nav-pressed-shadow: var(--dt-secondary-pressed-shadow);

  --dt-home-nav-promo-idle-bg: var(--dt-select-selected-bg);
  --dt-home-nav-promo-idle-border: var(--dt-select-selected-border);
  --dt-home-nav-promo-idle-text: var(--dt-select-selected-text);
  --dt-home-nav-promo-idle-shadow: var(--dt-select-selected-shadow);
  --dt-home-nav-promo-hover-bg: var(--dt-select-selected-hover-bg);
  --dt-home-nav-promo-hover-border: var(--dt-select-selected-hover-border);
  --dt-home-nav-promo-hover-text: var(--dt-select-selected-hover-text);
  --dt-home-nav-promo-hover-shadow: var(--dt-select-selected-hover-shadow);

  --dt-account-entry-idle-bg: var(--dt-secondary-idle-bg);
  --dt-account-entry-idle-border: var(--dt-select-idle-border);
  --dt-account-entry-idle-shadow: var(--dt-secondary-idle-shadow);
  --dt-account-entry-hover-bg: var(--dt-secondary-hover-bg);
  --dt-account-entry-hover-border: var(--dt-select-hover-border);
  --dt-account-entry-hover-text: var(--dt-secondary-hover-text);
  --dt-account-entry-hover-shadow: var(--dt-secondary-hover-shadow);
}

/* DonateTeam global selectable hover border unification - 20260707.
   Keep selectable backgrounds calm and move hover emphasis to a clean border glow.
   This intentionally affects existing consumers of --dt-select-* / --dt-control-* only. */
:root{
  --dt-select-clean-hover-shadow:
    inset 0 0 0 1.5px var(--dt-interactive-accent),
    0 0 8px rgba(167,94,255,.14);
  --dt-select-clean-selected-shadow:
    inset 0 0 0 1.5px var(--dt-interactive-accent),
    0 0 10px rgba(167,94,255,.18);
  --dt-select-clean-selected-hover-shadow:
    inset 0 0 0 1.5px var(--dt-interactive-accent-bright),
    0 0 10px rgba(167,94,255,.20);

  --active-button-hover: var(--dt-select-clean-selected-shadow);
  --active-button-hover-soft: var(--dt-select-clean-hover-shadow);
  --active-button-hover-enhanced: var(--dt-select-clean-selected-hover-shadow);
  --button-hover-shadow: var(--dt-select-clean-hover-shadow);
  --button-hover-border-only: var(--dt-select-clean-hover-shadow);

  --dt-select-hover-bg: var(--dt-interactive-bg);
  --dt-select-hover-border: var(--dt-interactive-accent);
  --dt-select-hover-text: var(--dt-interactive-accent);
  --dt-select-hover-shadow: var(--dt-select-clean-hover-shadow);
  --dt-select-selected-bg: var(--dt-interactive-bg);
  --dt-select-selected-border: var(--dt-interactive-accent);
  --dt-select-selected-text: var(--dt-interactive-accent);
  --dt-select-selected-shadow: var(--dt-select-clean-selected-shadow);
  --dt-select-selected-hover-bg: var(--dt-interactive-bg);
  --dt-select-selected-hover-border: var(--dt-interactive-accent-bright);
  --dt-select-selected-hover-text: var(--dt-interactive-text-bright);
  --dt-select-selected-hover-shadow: var(--dt-select-clean-selected-hover-shadow);
  --dt-select-text-shadow: none;
  --dt-select-hover-text-shadow: none;
  --dt-select-selected-hover-text-shadow: none;

  --dt-secondary-hover-bg: var(--dt-interactive-bg);
  --dt-secondary-hover-shadow: var(--dt-select-clean-hover-shadow);
  --dt-secondary-pressed-shadow:
    inset 0 2px 8px rgba(0,0,0,.32),
    var(--dt-select-clean-hover-shadow);

  --dt-interactive-control-hover-shadow: var(--dt-select-clean-hover-shadow);
  --dt-interactive-control-selected-shadow: var(--dt-select-clean-selected-shadow);
  --dt-interactive-control-selected-hover-shadow: var(--dt-select-clean-selected-hover-shadow);
  --dt-interactive-control-text-shadow: none;
  --dt-interactive-control-hover-text-shadow: none;
  --dt-interactive-loading-shadow: var(--dt-select-clean-hover-shadow);

  --dt-control-hover-shadow: rgb(167, 94, 255) 0px 0px 0px 1.5px inset, rgba(167, 94, 255, 0.14) 0px 0px 8px 0px;
  --dt-control-selected-shadow: rgb(167, 94, 255) 0px 0px 0px 1.5px inset, rgba(167, 94, 255, 0.18) 0px 0px 10px 0px;
  --dt-control-selected-text-shadow: none;
  --dt-control-selected-hover-shadow: color-mix(in srgb, var(--dt-interactive-accent) 88%, #fff 12%) 0px 0px 0px 1.5px inset, rgba(167, 94, 255, 0.20) 0px 0px 10px 0px;
  --dt-control-selected-hover-text-shadow: none;
  --dt-control-focus-visible-shadow: var(--dt-control-hover-shadow);

  --dt-home-nav-hover-shadow: var(--dt-select-clean-hover-shadow);
  --dt-home-nav-promo-idle-shadow: var(--dt-select-clean-selected-shadow);
  --dt-home-nav-promo-hover-shadow: var(--dt-select-clean-selected-hover-shadow);
  --dt-account-entry-hover-shadow: var(--dt-select-clean-hover-shadow);
}