/**
 * CSS Variables
 * Centralized color and typography system for the project
 * 
 * Usage:
 * - Fonts: var(--font-primary), var(--font-serif), etc.
 * - Colors: var(--color-bg-primary), var(--color-text-primary), etc.
 * - Тёмная тема по умолчанию; значения токенов — для dark UI
 *//* ============================================
   TYPOGRAPHY VARIABLES
   ============================================ */:root{
    /* Font Families */
    --font-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-numeric: 'Basel', sans-serif;
    --font-serif: 'Instrument Serif', serif; /* Для EN и ES */
    --font-mono: 'Courier New', monospace;
    --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    
    /* Font Sizes */
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 13px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    --font-size-3xl: 24px;
    --font-size-4xl: 48px;
    
    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.4;
    --line-height-relaxed: 1.6;

    /* Legacy alias used by select/dropdown components */
    --line-height-md: var(--line-height-normal);

    /* ============================================
       DESIGN SYSTEM: FORM CONTROLS
       ============================================ */
    --control-height-md: 41px;
    --control-height-mobile: 42px;
    --control-radius-md: 12px;
    --control-radius-input: var(--radius-full);
    --button-radius: var(--radius-full);
    --control-padding-x: 14px;
    --control-date-icon-size: 18px;
    --control-date-icon-right: 8px;
    --dropdown-option-padding-y: 10px;
    --dropdown-option-padding-x: 14px;
    --dropdown-option-selected-padding-right: 36px;
    --dropdown-check-right: 14px;

    /* Design-system actions: shared by landing, Dashboard, Nucleus and tools. */
    --button-height-sm: 32px;
    --button-height-md: var(--control-height-md);
    --button-height-lg: 48px;
    --button-padding-sm: var(--spacing-md);
    --button-padding-md: var(--spacing-xl);
    --button-padding-lg: var(--spacing-2xl);
    --button-gap: var(--spacing-sm);
    --button-icon-size: 18px;
    --button-spinner-size: 16px;
    --button-spinner-stroke: 2px;
    --button-disabled-opacity: 0.62;
    --button-press-scale: 0.96;
    --button-focus-width: 2px;
    --button-focus-offset: 3px;

    /* Shared component geometry. */
    --component-radius-sm: var(--radius-md);
    --component-radius-md: var(--radius-xl);
    --component-radius-lg: var(--radius-2xl);
    --component-border-width: 1px;
    --component-border: var(--component-border-width) solid var(--color-border-secondary);
    --component-padding-sm: var(--spacing-md);
    --component-padding-md: var(--spacing-xl);
    --component-padding-lg: var(--spacing-2xl);

    /* Dialog component */
    --dialog-width-sm: 400px;
    --dialog-width-md: 560px;
    --dialog-width-lg: 760px;
    --dialog-max-block-size: calc(100dvh - (var(--spacing-2xl) * 2));
    --dialog-radius: var(--radius-xl);
    --dialog-surface: var(--color-bg-modal);
    --dialog-backdrop: rgba(0, 0, 0, 0.68);
    --dialog-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
    --dialog-padding-inline: var(--spacing-3xl);
    --dialog-padding-block: var(--spacing-3xl);
    --dialog-section-gap: var(--spacing-xl);

    /* Checkbox: кастомный (label > input + span) и нативный (Financial Mirror) */
    --checkbox-control-size: 20px;
    --checkbox-control-radius: var(--radius-circle);
    --checkbox-control-border: 1px solid var(--color-border-secondary);
    --checkbox-control-bg: var(--color-bg-tertiary);
    --checkbox-control-bg-hover: var(--color-bg-secondary);
    --checkbox-control-bg-checked: var(--color-accent-primary);
    --checkbox-control-border-checked: var(--color-accent-primary);
    --checkbox-control-check: var(--color-text-inverse);
    --checkbox-control-focus: var(--color-button-primary-focus);
    --checkbox-control-label-inset: 28px;
    --checkbox-native-size: 18px;
    --checkbox-native-radius: var(--radius-circle);

    /* Chat: потолок авто-роста textarea (px; читает text-input.ts через getComputedStyle) */
    --chat-input-textarea-max-height: 288px;
}@media (max-width: 800px){:root{
        --chat-input-textarea-max-height: 200px;
    }
}/* Fallback for select components (keeps consistent line-height even if the file uses legacy ::root blocks). */:root{
    --line-height-md: var(--line-height-normal, 1.4);
}/* Для кириллицы (русская версия) используем Source Serif 4 вместо Instrument Serif */html[lang="ru"]{
    --font-serif: 'Source Serif 4', serif;
}/* ============================================
   COLOR VARIABLES - DARK THEME (Default)
   Neutral surfaces, borders, and status hues (no blue cast).
   ============================================ */:root{
    --color-cosmos-mist: #888888;
    --color-cosmos-deep: #3a3a3a;
    --color-cosmos-aurora: #6eb8a0;
    --color-cosmos-solar: #c9a06a;
    --color-cosmos-stellar: #b4b4b4;
    --color-cosmos-accent: #d4d4d4;

    --color-surface-muted: color-mix(in srgb, var(--color-cosmos-mist) 9%, #020203);
    --color-surface-muted-hover: color-mix(in srgb, var(--color-cosmos-mist) 14%, #121212);
    --color-surface-muted-active: color-mix(in srgb, var(--color-cosmos-mist) 19%, #1a1a1a);
    --color-well: var(--color-surface-muted);
    --color-well-hover: var(--color-surface-muted-hover);
    --color-well-active: var(--color-surface-muted-active);
    --color-island-border: transparent;
    --nv-surface-solid: var(--color-bg-card);
    --nv-surface-elevated: var(--color-bg-secondary);
    --nv-border-subtle: var(--color-border-secondary);

    /* Background Colors */
    --color-bg-primary: #1A1A1A;
    /* Холст приложения под видео/градиентами (Assistant, Nucleus body) — темнее карточного primary */
    --color-bg-canvas: #020203;
    --color-bg-secondary: #121212;
    --color-bg-tertiary: #272727;
    --color-bg-card: var(--color-surface-muted);
    --color-bg-input: var(--color-surface-muted);
    --color-bg-input-focus: var(--color-surface-muted-hover);
    --color-bg-modal: #121212;
    --color-bg-modal-light: #1A1A1A;
    /* Cool cosmic sheet — never equal-RGB charcoal (#1A1A1A reads brown on #020203) */
    --color-bg-popover: color-mix(in srgb, var(--color-cosmos-mist) 12%, #121212);
    --color-bg-button-container: #121212;
    --color-bg-result: #1A1A1A;
    
    /* Menu & Chat Backgrounds */
    --color-bg-menu: linear-gradient(180deg, #272727 0%, #1F1F1F 100%);
    /* Плавный градиент с минимальным контрастом для предотвращения артефактов */
    --color-bg-chat: linear-gradient(180deg, #272727 0%, #1F1F1F 100%);
    --color-bg-chat-input-area: linear-gradient(to top, rgba(18, 18, 18, 0.15) 0%, rgba(18, 18, 18, 0.08) 30%, rgba(18, 18, 18, 0) 100%);
    --color-bg-chat-minimized: #272727;
    
    /* Text Colors */
    --color-text-primary: #eeeeee;
    /* Monetary amounts, balances, KPIs and percentages stay neutral. */
    --color-number-primary: var(--color-text-primary);
    --color-text-secondary: rgba(238, 238, 238, 0.7);
    --color-text-tertiary: rgba(238, 238, 238, 0.5);
    --color-text-disabled: rgba(238, 238, 238, 0.4);
    --color-text-muted: rgba(238, 238, 238, 0.3);
    --color-text-inverse: #000000;
    
    /* Border Colors — neutral hairlines */
    --color-border-primary: color-mix(in srgb, var(--color-cosmos-mist) 24%, transparent);
    --color-border-secondary: color-mix(in srgb, var(--color-cosmos-mist) 16%, transparent);
    --color-border-tertiary: color-mix(in srgb, var(--color-cosmos-mist) 10%, transparent);
    --color-border-hover: color-mix(in srgb, var(--color-cosmos-mist) 28%, transparent);
    --color-border-strong: color-mix(in srgb, var(--color-cosmos-mist) 34%, transparent);
    --color-border-error: rgba(239, 68, 68, 0.32);
    
    /* Акцент UI (чипы, today, бейджи): нейтральный светлый. CTA-pill остаётся --color-button-primary. */
    --color-accent-primary: var(--color-cosmos-accent);
    --color-accent-hover: color-mix(in srgb, var(--color-cosmos-accent) 82%, #eeeeee);
    --color-accent-active: color-mix(in srgb, var(--color-cosmos-accent) 78%, var(--color-cosmos-deep));
    --color-accent-light: color-mix(in srgb, var(--color-cosmos-accent) 38%, transparent);
    
    /* Status — cosmic aurora / solar / stellar (error stays flare red) */
    --color-success: var(--color-cosmos-aurora);
    --color-success-soft: color-mix(in srgb, var(--color-cosmos-aurora) 14%, transparent);
    --color-error: #ef4444;
    --color-error-soft: rgba(239, 68, 68, 0.12);
    --color-warning: var(--color-cosmos-solar);
    --color-warning-soft: color-mix(in srgb, var(--color-cosmos-solar) 14%, transparent);
    --color-info: var(--color-cosmos-stellar);
    --color-info-soft: color-mix(in srgb, var(--color-cosmos-stellar) 14%, transparent);
    --color-neutral-soft: color-mix(in srgb, var(--color-cosmos-mist) 10%, transparent);
    
    /* Primary = белая кнопка, тёмный текст (WCAG на #1A1A1A фоне) */
    --color-button-primary: #eeeeee;
    --color-button-primary-text: #0A0A0A;
    --color-button-primary-hover: #F0F0F0;
    --color-button-primary-active: #E0E0E0;
    --color-button-primary-disabled: #3F3F46;
    --color-button-primary-disabled-text: #A1A1AA;
    --color-button-primary-focus: rgba(238, 238, 238, 0.5);
    --color-button-secondary: var(--color-surface-muted);
    --color-button-secondary-hover: var(--color-surface-muted-hover);

    /* Input Colors (согласованы с --color-surface-muted) */
    --color-input-bg: var(--color-surface-muted);
    --color-input-bg-hover: var(--color-surface-muted-hover);
    --color-input-bg-focus: var(--color-surface-muted-hover);
    --color-input-text: #eeeeee;
    --color-input-placeholder: rgba(238, 238, 238, 0.3);
    --color-input-border: none;
    --color-input-border-focus: none;

    /*
     * Стекло для инпутов / кастомных селектов / выпадашек (эталон: invoice-controls-unified.css).
     * Поверх контента с blur; панель списка — плотнее, чем триггер.
     */
    --control-glass-surface: color-mix(in srgb, var(--color-cosmos-mist) 10%, #121212);
    --control-glass-surface-hover: color-mix(in srgb, var(--color-cosmos-mist) 14%, #1a1a1a);
    --control-glass-surface-focus: color-mix(in srgb, var(--color-cosmos-mist) 18%, #1a1a1a);
    --control-glass-panel: rgba(18, 18, 18, 0.92);
    --control-glass-panel-border: 1px solid var(--color-border-secondary);
    --control-glass-blur: blur(8px);
    --control-glass-blur-dropdown: blur(12px);
    --control-glass-dropdown-shadow: 0 14px 32px rgba(0, 0, 0, 0.38);
    --control-glass-option-hover: color-mix(in srgb, var(--color-cosmos-mist) 16%, #1a1a1a);
    
    /* Logo Colors */
    --color-logo: #eeeeee;
    --color-logo-inverse: #000000;
    
    /* Switch Colors */
    --color-switch-bg: #272727;
    --color-switch-slider: #eeeeee;
    
    /* Overlay Colors */
    --color-overlay: rgba(0, 0, 0, 0.7);
    --color-overlay-strong: rgba(0, 0, 0, 0.8);
}

/* ============================================
   COLOR VARIABLES - LIGHT THEME
   White page + white sheets. Nested wells: neutral mist, not a second page gray.
   Landing keeps its own canvas in landing-theme.css.
   Nested wells: --color-surface-muted on white, never a second page gray.
   App runtime stays dark-only (theme.ts).
   ============================================ */
html.light,
html.light-theme,
body.light-theme {
    --color-cosmos-mist: #5e5e5e;
    --color-cosmos-deep: #e4e4e4;
    --color-cosmos-aurora: #1e7a61;
    --color-cosmos-solar: #b56a14;
    --color-cosmos-stellar: #4a4a4a;
    --color-cosmos-accent: #2a2a2a;

    --color-surface-muted: color-mix(in srgb, var(--color-cosmos-mist) 8%, #ffffff);
    --color-surface-muted-hover: color-mix(in srgb, var(--color-cosmos-mist) 13%, #ffffff);
    --color-surface-muted-active: color-mix(in srgb, var(--color-cosmos-mist) 18%, #ffffff);
    --color-well: var(--color-surface-muted);
    --color-well-hover: var(--color-surface-muted-hover);
    --color-well-active: var(--color-surface-muted-active);
    --color-island-border: color-mix(in srgb, var(--color-cosmos-mist) 10%, #ffffff);
    --nv-surface-solid: #ffffff;
    --nv-surface-elevated: #ffffff;
    --nv-border-subtle: var(--color-border-secondary);

    --color-bg-primary: #ffffff;
    --color-bg-canvas: #ffffff;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #ffffff;
    --color-bg-card: #ffffff;
    --color-bg-input: var(--color-surface-muted);
    --color-bg-input-focus: var(--color-surface-muted-hover);
    --color-bg-modal: #ffffff;
    --color-bg-modal-light: #ffffff;
    --color-bg-popover: #ffffff;
    --color-bg-button-container: #ffffff;
    --color-bg-result: #ffffff;

    --color-bg-menu: #ffffff;
    --color-bg-chat: #ffffff;
    --color-bg-chat-input-area: linear-gradient(to top, rgb(255 255 255 / 0.92) 0%, rgb(255 255 255 / 0.4) 30%, rgb(255 255 255 / 0) 100%);
    --color-bg-chat-minimized: #ffffff;

    --color-text-primary: color-mix(in srgb, var(--color-cosmos-mist) 86%, #070707);
    --color-number-primary: var(--color-text-primary);
    /* Opaque light-theme text roles keep their contrast on white and mist wells. */
    --color-text-secondary: var(--color-cosmos-mist);
    --color-text-tertiary: #6b6b6b;
    --color-text-disabled: #6e6e6e;
    --color-text-muted: #6a6a6a;
    --color-text-inverse: #fcfcfc;

    --color-border-primary: color-mix(in srgb, var(--color-cosmos-mist) 22%, #ffffff);
    --color-border-secondary: color-mix(in srgb, var(--color-cosmos-mist) 14%, #ffffff);
    --color-border-tertiary: color-mix(in srgb, var(--color-cosmos-mist) 8%, #ffffff);
    --color-border-hover: color-mix(in srgb, var(--color-cosmos-mist) 26%, #ffffff);
    --color-border-strong: color-mix(in srgb, var(--color-cosmos-mist) 32%, #ffffff);
    --color-border-error: rgba(239, 68, 68, 0.32);

    --color-success: #17654f;
    --color-success-soft: color-mix(in srgb, var(--color-cosmos-aurora) 11%, transparent);
    --color-error: #dc2626;
    --color-error-soft: color-mix(in srgb, var(--color-error) 9%, transparent);
    --color-warning: #96530d;
    --color-warning-soft: color-mix(in srgb, var(--color-cosmos-solar) 11%, transparent);
    --color-info: var(--color-cosmos-stellar);
    --color-info-soft: color-mix(in srgb, var(--color-cosmos-stellar) 10%, transparent);
    --color-neutral-soft: color-mix(in srgb, var(--color-cosmos-mist) 8%, transparent);

    --color-accent-primary: var(--color-cosmos-accent);
    --color-accent-hover: color-mix(in srgb, var(--color-cosmos-accent) 78%, #111111);
    --color-accent-active: color-mix(in srgb, var(--color-cosmos-accent) 62%, #111111);
    --color-accent-light: color-mix(in srgb, var(--color-cosmos-accent) 42%, transparent);

    --color-button-primary: var(--color-cosmos-accent);
    --color-button-primary-text: #fcfcfc;
    --color-button-primary-hover: color-mix(in srgb, var(--color-cosmos-accent) 78%, #111111);
    --color-button-primary-active: color-mix(in srgb, var(--color-cosmos-accent) 62%, #111111);
    --color-button-primary-disabled: #d4d4d8;
    --color-button-primary-disabled-text: #71717a;
    --color-button-primary-focus: var(--color-cosmos-accent);
    --color-button-secondary: var(--color-surface-muted);
    --color-button-secondary-hover: var(--color-surface-muted-hover);

    --color-input-bg: var(--color-surface-muted);
    --color-input-bg-hover: var(--color-surface-muted-hover);
    --color-input-bg-focus: var(--color-surface-muted-hover);
    --color-input-text: var(--color-text-primary);
    --color-input-placeholder: var(--color-text-muted);
    --color-input-border: none;
    --color-input-border-focus: none;

    --control-glass-surface: color-mix(in srgb, var(--color-cosmos-mist) 9%, #ffffff);
    --control-glass-surface-hover: color-mix(in srgb, var(--color-cosmos-mist) 13%, #ffffff);
    --control-glass-surface-focus: color-mix(in srgb, var(--color-cosmos-mist) 16%, #ffffff);
    --control-glass-panel: rgba(255, 255, 255, 0.96);
    --control-glass-panel-border: 1px solid var(--color-border-secondary);
    --control-glass-dropdown-shadow: 0 14px 32px rgba(7, 7, 7, 0.12);
    --control-glass-option-hover: color-mix(in srgb, var(--color-cosmos-mist) 10%, #ffffff);

    --color-logo: var(--color-text-primary);
    --color-logo-inverse: #eeeeee;

    --color-switch-bg: var(--color-well-active);
    --color-switch-slider: #ffffff;
    --nv-switch-thumb-shadow: none;

    --color-overlay: rgba(7, 7, 7, 0.45);
    --color-overlay-strong: rgba(7, 7, 7, 0.62);

    --foreground: var(--color-text-primary);
    --background: #ffffff;

    --shadow-sm: 0 2px 4px rgba(7, 7, 7, 0.06);
    --shadow-md: 0 4px 12px rgba(7, 7, 7, 0.08);
    --shadow-lg: 0 8px 24px rgba(7, 7, 7, 0.1);
    --shadow-xl: 0 16px 48px rgba(7, 7, 7, 0.12);
    --shadow-soft: 0 4px 16px rgba(7, 7, 7, 0.08);
}

@media (prefers-contrast: more) {
    html.light,
    html.light-theme,
    body.light-theme {
        --color-text-secondary: var(--color-text-primary);
        --color-text-tertiary: var(--color-cosmos-mist);
        --color-text-muted: var(--color-cosmos-mist);
        --color-surface-muted: color-mix(in srgb, var(--color-cosmos-mist) 12%, #ffffff);
        --color-surface-muted-hover: color-mix(in srgb, var(--color-cosmos-mist) 18%, #ffffff);
        --color-surface-muted-active: color-mix(in srgb, var(--color-cosmos-mist) 24%, #ffffff);
        --color-border-primary: var(--color-cosmos-mist);
        --color-border-secondary: color-mix(in srgb, var(--color-cosmos-mist) 58%, #ffffff);
        --color-border-hover: var(--color-cosmos-mist);
        --color-border-strong: var(--color-cosmos-accent);
    }
}

/* ============================================
   SPACING VARIABLES
   ============================================ */:root{
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --spacing-3xl: 28px;
    --spacing-4xl: 32px;
    --spacing-5xl: 40px;
    --spacing-6xl: 48px;
    --spacing-7xl: 56px;
    --spacing-8xl: 64px;
    --spacing-9xl: 72px;
    --spacing-10xl: 80px;
    --spacing-11xl: 88px;
    --spacing-12xl: 96px;
    --spacing-13xl: 104px;
    --spacing-14xl: 112px;
    --spacing-15xl: 120px;
    --spacing-16xl: 128px;
    --spacing-17xl: 136px;
    --spacing-18xl: 144px;
    --spacing-19xl: 152px;
    --spacing-20xl: 160px;
    --spacing-21xl: 168px;
    --spacing-22xl: 176px;
    --spacing-23xl: 184px;
    --spacing-24xl: 192px;
    --spacing-25xl: 200px;
    --spacing-26xl: 208px;
    --spacing-27xl: 216px;
    --spacing-28xl: 224px;
    --spacing-29xl: 232px;
    --spacing-30xl: 240px;
    --spacing-31xl: 248px;
    --spacing-32xl: 256px;
    --spacing-33xl: 264px;
    --spacing-34xl: 272px;
    --spacing-35xl: 280px;
    --spacing-36xl: 288px;
    --spacing-37xl: 296px;
    --spacing-38xl: 300px;

    /* Nucleus Finance hub — NUCLEUS_TOKENS_COMPONENTS §2.2 */
    --nucleus-hub-content-max: 60rem;
    --nucleus-hub-surface: var(--color-surface-muted);
    --nucleus-hub-surface-border: var(--color-border-secondary);
    --nucleus-hub-divider: color-mix(in srgb, var(--color-border-secondary) 72%, transparent);
    --nucleus-insights-block-bg: var(--nucleus-hub-surface);
    --nucleus-insights-block-border: var(--nucleus-hub-surface-border);
    --nucleus-insights-block-radius: var(--radius-md);
}/* ============================================
   BORDER RADIUS VARIABLES
   ============================================ */:root{
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 28px;
    --radius-3xl: 24px;
    --radius-full: 9999px;
    --radius-circle: 50%;
    /* Левая навигация: крупные углы в духе iOS / островов Finance (vmin — без container query) */
    --nav-left-radius-outer: clamp(28px, 3.5vmin, 42px);
    --nav-left-radius-inset: clamp(18px, 2.4vmin, 28px);
}/* ============================================
   TRANSITION VARIABLES
   ============================================ */:root{
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-slower: 0.4s ease;
}/* ============================================
   SHADOW VARIABLES
   ============================================ */:root{
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.25);
    --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.3);
}/* ============================================
   Z-INDEX VARIABLES
   ============================================ */:root{
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    /* Маркетинговый scroll header: выше секций/hero/chat, ниже прелоадера и модалок */
    --z-scroll-header: 9000;
    --z-scroll-header-menu: 9010;
    --z-modal-backdrop: 10000;
    --z-modal: 10001;
    --z-tooltip: 20000;
    --z-max: 2147483647;
}

/* Mobile app rhythm tokens (applied by mobile media blocks). */
:root{
    --mobile-shell-max-width: 540px;
    --mobile-page-padding-x: var(--spacing-lg);
    --mobile-page-padding-y: var(--spacing-xl);
    --mobile-stack-gap: var(--spacing-lg);
    --mobile-card-radius: var(--radius-2xl);
    --mobile-card-padding: var(--spacing-lg);
    --mobile-tap-target: 44px;
}

/* Badges use sentence/title case across product surfaces. */
[class*="badge" i] {
    text-transform: none !important;
}

/* Button-like links should look like controls, not text links. */
:where(
    button,
    a[role="button"],
    a[class*="btn" i],
    a[class*="button" i],
    a[class*="action" i],
    a[class*="cta" i]
) {
    text-decoration: none;
}

:where(
    button,
    a[role="button"],
    a[class*="btn" i],
    a[class*="button" i],
    a[class*="action" i],
    a[class*="cta" i]
):where(:hover, :focus, :focus-visible) {
    text-decoration: none;
}