/**
 * @name DMS
 * @description Material Design 3 recolor generated by DankMaterialShell (matugen). Stock layout, colors only.
 * @author DankMaterialShell
 * @version 1.0.0
 * @website https://github.com/AvengeMedia/DankMaterialShell
*/

.theme-dark,
.theme-light,
.visual-refresh.theme-dark,
.visual-refresh.theme-light,
.visual-refresh .theme-dark,
.visual-refresh .theme-light {
    /* base backgrounds — MD3 elevation: content darkest, chrome lighter */
    --background-base-low: {{colors.surface.default.hex}} !important;
    --chat-background: {{colors.surface.default.hex}} !important;
    --chat-background-default: {{colors.surface.default.hex}} !important;
    --background-primary: {{colors.surface.default.hex}} !important;
    --bg-base-primary: {{colors.surface.default.hex}} !important;
    --home-background: {{colors.surface.default.hex}} !important;

    --background-base-lower: {{colors.surface_container_low.default.hex}} !important;
    --background-secondary: {{colors.surface_container_low.default.hex}} !important;
    --bg-base-secondary: {{colors.surface_container_low.default.hex}} !important;
    --custom-channel-members-bg: {{colors.surface_container_low.default.hex}} !important;

    --background-base-lowest: {{colors.surface_container.default.hex}} !important;
    --app-frame-background: {{colors.surface_container.default.hex}} !important;
    --background-tertiary: {{colors.surface_container.default.hex}} !important;
    --background-secondary-alt: {{colors.surface_container.default.hex}} !important;
    --bg-base-tertiary: {{colors.surface_container.default.hex}} !important;
    --__header-bar-background: {{colors.surface_container.default.hex}} !important;

    --background-surface-high: {{colors.surface_container_high.default.hex}} !important;
    --bg-surface-raised: {{colors.surface_container_high.default.hex}} !important;
    --card-primary-bg: {{colors.surface_container_high.default.hex}} !important;
    --activity-card-background: {{colors.surface_container_high.default.hex}} !important;

    --background-surface-higher: {{colors.surface_container_high.default.hex}} !important;
    --bg-surface-overlay: {{colors.surface_container_high.default.hex}} !important;
    --background-floating: {{colors.surface_container_high.default.hex}} !important;
    --background-nested-floating: {{colors.surface_container_high.default.hex}} !important;
    --autocomplete-bg: {{colors.surface_container_high.default.hex}} !important;

    --background-surface-highest: {{colors.surface_container_highest.default.hex}} !important;
    --modal-background: {{colors.surface_container_highest.default.hex}} !important;
    --modal-footer-background: {{colors.surface_container_highest.default.hex}} !important;
    --background-accent: {{colors.surface_container_highest.default.hex}} !important;
    --card-secondary-bg: {{colors.surface_container_highest.default.hex}} !important;
    --user-profile-overlay-background: {{colors.surface_container_highest.default.hex}} !important;

    --chat-border: color-mix(in srgb, {{colors.outline_variant.default.hex}} 50%, transparent) !important;

    /* text */
    --text-default: {{colors.on_surface.default.hex}} !important;
    --text-normal: {{colors.on_surface.default.hex}} !important;
    --text-primary: {{colors.on_surface.default.hex}} !important;
    --text-strong: {{colors.on_surface.default.hex}} !important;
    --header-primary: {{colors.on_surface.default.hex}} !important;
    --embed-title: {{colors.on_surface.default.hex}} !important;
    --interactive-active: {{colors.on_surface.default.hex}} !important;
    --input-text-default: {{colors.on_surface.default.hex}} !important;

    --text-secondary: {{colors.on_surface_variant.default.hex}} !important;
    --text-muted: {{colors.on_surface_variant.default.hex}} !important;
    --text-subtle: {{colors.on_surface_variant.default.hex}} !important;
    --text-tertiary: {{colors.on_surface_variant.default.hex}} !important;
    --chat-text-muted: {{colors.on_surface_variant.default.hex}} !important;
    --header-secondary: {{colors.on_surface_variant.default.hex}} !important;
    --header-muted: {{colors.on_surface_variant.default.hex}} !important;
    --text-muted-on-default: {{colors.on_surface_variant.default.hex}} !important;
    --text-low-contrast: {{colors.on_surface_variant.default.hex}} !important;

    --interactive-normal: {{colors.on_surface_variant.default.hex}} !important;
    --channels-default: {{colors.outline.default.hex}} !important;
    --channel-icon: {{colors.outline.default.hex}} !important;
    --icon-primary: {{colors.on_surface_variant.default.hex}} !important;
    --icon-secondary: {{colors.on_surface_variant.default.hex}} !important;
    --icon-tertiary: {{colors.on_surface_variant.default.hex}} !important;
    --interactive-icon-default: {{colors.on_surface_variant.default.hex}} !important;
    --interactive-hover: {{colors.on_surface.default.hex}} !important;
    --interactive-icon-hover: {{colors.on_surface.default.hex}} !important;
    --interactive-icon-active: {{colors.on_surface.default.hex}} !important;
    --interactive-text-hover: {{colors.on_surface.default.hex}} !important;
    --interactive-text-active: {{colors.on_surface.default.hex}} !important;

    --interactive-muted: {{colors.outline_variant.default.hex}} !important;
    --icon-muted: {{colors.outline.default.hex}} !important;
    --channel-text-area-placeholder: {{colors.outline.default.hex}} !important;
    --input-placeholder-text-default: {{colors.outline.default.hex}} !important;

    --text-link: {{colors.primary.default.hex}} !important;
    --text-brand: {{colors.primary.default.hex}} !important;
    --control-brand-foreground: {{colors.primary.default.hex}} !important;
    --control-brand-foreground-new: {{colors.primary.default.hex}} !important;
    --badge-text-brand: {{colors.primary.default.hex}} !important;

    --text-danger: {{colors.error.default.hex}} !important;
    --text-feedback-critical: {{colors.error.default.hex}} !important;
    --text-positive: #23a55a !important;
    --text-feedback-positive: #23a55a !important;
    --text-warning: #f0b232 !important;
    --text-feedback-warning: #f0b232 !important;
    --text-feedback-info: {{colors.secondary.default.hex}} !important;

    /* interactive state layers — translucent, MD3 opacities */
    --background-modifier-hover: color-mix(in srgb, {{colors.on_surface.default.hex}} 8%, transparent) !important;
    --background-mod-subtle: color-mix(in srgb, {{colors.on_surface.default.hex}} 8%, transparent) !important;
    --bg-mod-faint: color-mix(in srgb, {{colors.on_surface.default.hex}} 8%, transparent) !important;
    --interactive-background-hover: color-mix(in srgb, {{colors.on_surface.default.hex}} 8%, transparent) !important;

    --background-modifier-active: color-mix(in srgb, {{colors.on_surface.default.hex}} 10%, transparent) !important;
    --background-mod-normal: color-mix(in srgb, {{colors.on_surface.default.hex}} 10%, transparent) !important;
    --interactive-background-active: color-mix(in srgb, {{colors.on_surface.default.hex}} 10%, transparent) !important;

    --background-modifier-selected: color-mix(in srgb, {{colors.primary.default.hex}} 14%, transparent) !important;
    --background-mod-strong: color-mix(in srgb, {{colors.primary.default.hex}} 14%, transparent) !important;
    --bg-mod-strong: color-mix(in srgb, {{colors.primary.default.hex}} 14%, transparent) !important;
    --interactive-background-selected: color-mix(in srgb, {{colors.primary.default.hex}} 14%, transparent) !important;

    --background-modifier-accent: color-mix(in srgb, {{colors.on_surface.default.hex}} 6%, transparent) !important;
    --background-message-hover: color-mix(in srgb, {{colors.on_surface.default.hex}} 4%, transparent) !important;
    --message-background-hover: color-mix(in srgb, {{colors.on_surface.default.hex}} 4%, transparent) !important;

    --background-message-highlight: color-mix(in srgb, {{colors.tertiary.default.hex}} 10%, transparent) !important;
    --background-message-highlight-hover: color-mix(in srgb, {{colors.tertiary.default.hex}} 14%, transparent) !important;
    --message-highlight-background-default: color-mix(in srgb, {{colors.tertiary.default.hex}} 10%, transparent) !important;
    --message-highlight-background-hover: color-mix(in srgb, {{colors.tertiary.default.hex}} 14%, transparent) !important;

    --background-mentioned: color-mix(in srgb, {{colors.primary.default.hex}} 10%, transparent) !important;
    --background-mentioned-hover: color-mix(in srgb, {{colors.primary.default.hex}} 14%, transparent) !important;
    --message-mentioned-background-default: color-mix(in srgb, {{colors.primary.default.hex}} 10%, transparent) !important;
    --message-mentioned-background-hover: color-mix(in srgb, {{colors.primary.default.hex}} 14%, transparent) !important;
    --mention-background: color-mix(in srgb, {{colors.primary.default.hex}} 15%, transparent) !important;
    --mention-foreground: {{colors.primary.default.hex}} !important;

    --message-reacted-background-default: color-mix(in srgb, {{colors.primary.default.hex}} 15%, transparent) !important;
    --message-reacted-text-default: {{colors.on_surface.default.hex}} !important;

    /* brand ramp — absolute lightness steps, mode-safe */
    --brand-100: color-mix(in srgb, {{colors.primary.default.hex}} 12%, #ffffff) !important;
    --brand-200: color-mix(in srgb, {{colors.primary.default.hex}} 25%, #ffffff) !important;
    --brand-260: color-mix(in srgb, {{colors.primary.default.hex}} 33%, #ffffff) !important;
    --brand-300: color-mix(in srgb, {{colors.primary.default.hex}} 40%, #ffffff) !important;
    --brand-360: color-mix(in srgb, {{colors.primary.default.hex}} 55%, #ffffff) !important;
    --brand-400: color-mix(in srgb, {{colors.primary.default.hex}} 70%, #ffffff) !important;
    --brand-500: {{colors.primary.default.hex}} !important;
    --brand-560: color-mix(in srgb, {{colors.primary.default.hex}} 90%, #000000) !important;
    --brand-600: color-mix(in srgb, {{colors.primary.default.hex}} 85%, #000000) !important;
    --brand-700: color-mix(in srgb, {{colors.primary.default.hex}} 70%, #000000) !important;
    --brand-800: color-mix(in srgb, {{colors.primary.default.hex}} 55%, #000000) !important;
    --brand-900: color-mix(in srgb, {{colors.primary.default.hex}} 40%, #000000) !important;
    --brand-experiment: {{colors.primary.default.hex}} !important;
    --brand-experiment-360: {{colors.primary.default.hex}} !important;
    --brand-experiment-500: {{colors.primary.default.hex}} !important;
    --blurple-50: {{colors.primary.default.hex}} !important;
    --blue-500: {{colors.primary.default.hex}} !important;

    /* buttons and controls — on-color state layers */
    --bg-brand: {{colors.primary.default.hex}} !important;
    --background-brand: {{colors.primary.default.hex}} !important;
    --control-primary-background-default: {{colors.primary.default.hex}} !important;
    --control-primary-background-hover: color-mix(in srgb, {{colors.primary.default.hex}} 92%, {{colors.on_primary.default.hex}}) !important;
    --control-primary-background-active: color-mix(in srgb, {{colors.primary.default.hex}} 85%, {{colors.on_primary.default.hex}}) !important;
    --button-filled-brand-background: {{colors.primary.default.hex}} !important;
    --button-filled-brand-background-hover: color-mix(in srgb, {{colors.primary.default.hex}} 92%, {{colors.on_primary.default.hex}}) !important;
    --button-filled-brand-background-active: color-mix(in srgb, {{colors.primary.default.hex}} 85%, {{colors.on_primary.default.hex}}) !important;
    --button-filled-brand-text: {{colors.on_primary.default.hex}} !important;

    --control-secondary-background-default: {{colors.surface_container_high.default.hex}} !important;
    --control-secondary-background-hover: {{colors.surface_container_highest.default.hex}} !important;
    --control-secondary-background-active: color-mix(in srgb, {{colors.surface_container_highest.default.hex}} 90%, {{colors.on_surface.default.hex}}) !important;
    --control-secondary-text-default: {{colors.on_surface.default.hex}} !important;
    --button-secondary-background: {{colors.surface_container_high.default.hex}} !important;
    --button-secondary-background-hover: {{colors.surface_container_highest.default.hex}} !important;
    --button-secondary-background-active: color-mix(in srgb, {{colors.surface_container_highest.default.hex}} 90%, {{colors.on_surface.default.hex}}) !important;
    --button-secondary-text: {{colors.on_surface.default.hex}} !important;
    --redesign-button-secondary-text: {{colors.on_surface.default.hex}} !important;

    --button-danger-background: {{colors.error.default.hex}} !important;
    --button-danger-background-hover: color-mix(in srgb, {{colors.error.default.hex}} 92%, {{colors.on_error.default.hex}}) !important;
    --button-danger-background-active: color-mix(in srgb, {{colors.error.default.hex}} 85%, {{colors.on_error.default.hex}}) !important;
    --button-danger-text: {{colors.on_error.default.hex}} !important;
    --control-critical-primary-background-default: {{colors.error.default.hex}} !important;
    --button-outline-danger-text: {{colors.error.default.hex}} !important;
    --button-outline-danger-text-hover: {{colors.error.default.hex}} !important;
    --button-outline-danger-text-active: {{colors.error.default.hex}} !important;
    --button-outline-danger-border: {{colors.error.default.hex}} !important;
    --button-outline-danger-border-hover: {{colors.error.default.hex}} !important;
    --button-outline-danger-border-active: {{colors.error.default.hex}} !important;

    --button-positive-background: #23a55a !important;
    --button-positive-background-hover: color-mix(in srgb, #23a55a 90%, #ffffff) !important;

    --button-outline-primary-text: {{colors.on_surface.default.hex}} !important;
    --button-outline-primary-text-hover: {{colors.on_surface.default.hex}} !important;
    --button-outline-primary-text-active: {{colors.on_surface.default.hex}} !important;
    --button-outline-primary-background-hover: color-mix(in srgb, {{colors.on_surface.default.hex}} 8%, transparent) !important;
    --button-outline-primary-background-active: color-mix(in srgb, {{colors.on_surface.default.hex}} 10%, transparent) !important;
    --button-outline-brand-text: {{colors.primary.default.hex}} !important;
    --button-outline-brand-background-hover: color-mix(in srgb, {{colors.primary.default.hex}} 10%, transparent) !important;
    --button-transparent-text: {{colors.on_surface.default.hex}} !important;
    --button-transparent-background-hover: color-mix(in srgb, {{colors.on_surface.default.hex}} 8%, transparent) !important;
    --button-transparent-background-active: color-mix(in srgb, {{colors.on_surface.default.hex}} 10%, transparent) !important;

    --redesign-input-control-selected: {{colors.primary.default.hex}} !important;
    --focus-primary: {{colors.primary.default.hex}} !important;
    --__adaptive-focus-ring-color: {{colors.primary.default.hex}} !important;

    /* status — keep Discord semantics, theme only offline */
    --status-online: #23a55a !important;
    --status-positive: #23a55a !important;
    --status-speaking: #23a55a !important;
    --text-status-online: #23a55a !important;
    --icon-status-online: #23a55a !important;
    --status-idle: #f0b232 !important;
    --text-status-idle: #f0b232 !important;
    --icon-status-idle: #f0b232 !important;
    --status-dnd: #f13f43 !important;
    --text-status-dnd: #f13f43 !important;
    --icon-status-dnd: #f13f43 !important;
    --status-danger: #f13f43 !important;
    --status-offline: {{colors.outline.default.hex}} !important;
    --text-status-offline: {{colors.outline.default.hex}} !important;
    --icon-status-offline: {{colors.outline.default.hex}} !important;

    /* feedback, notices, badges */
    --background-feedback-critical: {{colors.error_container.default.hex}} !important;
    --notice-background-critical: {{colors.error_container.default.hex}} !important;
    --notice-text-critical: {{colors.on_error_container.default.hex}} !important;
    --icon-feedback-critical: {{colors.error.default.hex}} !important;
    --background-feedback-positive: {{colors.primary_container.default.hex}} !important;
    --notice-background-positive: {{colors.primary_container.default.hex}} !important;
    --notice-text-positive: {{colors.on_primary_container.default.hex}} !important;
    --background-feedback-info: {{colors.secondary_container.default.hex}} !important;
    --notice-background-info: {{colors.secondary_container.default.hex}} !important;
    --notice-text-info: {{colors.on_secondary_container.default.hex}} !important;
    --background-feedback-warning: {{colors.tertiary_container.default.hex}} !important;
    --notice-background-warning: {{colors.tertiary_container.default.hex}} !important;
    --notice-text-warning: {{colors.on_tertiary_container.default.hex}} !important;
    --badge-notification-background: {{colors.primary.default.hex}} !important;
    --background-feedback-notification: {{colors.primary.default.hex}} !important;
    --red-400: {{colors.error.default.hex}} !important;
    --red-430: {{colors.error.default.hex}} !important;
    --red-500: {{colors.error.default.hex}} !important;

    /* inputs, code, spoilers */
    --input-background-default: {{colors.surface_container_highest.default.hex}} !important;
    --input-background: {{colors.surface_container_highest.default.hex}} !important;
    --channeltextarea-background: {{colors.surface_container_highest.default.hex}} !important;
    --deprecated-text-input-bg: {{colors.surface_container_highest.default.hex}} !important;
    --input-border-default: {{colors.outline_variant.default.hex}} !important;
    --input-border: {{colors.outline_variant.default.hex}} !important;
    --deprecated-text-input-border: {{colors.outline_variant.default.hex}} !important;
    --background-code: {{colors.surface_container.default.hex}} !important;
    --spoiler-hidden-background: {{colors.surface_container_highest.default.hex}} !important;
    --spoiler-revealed-background: {{colors.surface_container.default.hex}} !important;

    /* scrollbars */
    --scrollbar-auto-thumb: {{colors.outline_variant.default.hex}} !important;
    --scrollbar-thin-thumb: {{colors.outline_variant.default.hex}} !important;
    --scrollbar-auto-scrollbar-color-thumb: {{colors.outline_variant.default.hex}} !important;
    --scrollbar-auto-track: transparent !important;
    --scrollbar-thin-track: transparent !important;
    --scrollbar-auto-scrollbar-color-track: transparent !important;

    /* borders */
    --border-faint: color-mix(in srgb, {{colors.outline_variant.default.hex}} 30%, transparent) !important;
    --border-subtle: color-mix(in srgb, {{colors.outline_variant.default.hex}} 50%, transparent) !important;
    --border-muted: {{colors.outline_variant.default.hex}} !important;
    --border-normal: {{colors.outline_variant.default.hex}} !important;
    --border-strong: {{colors.outline.default.hex}} !important;
}

::selection {
    background: color-mix(in srgb, {{colors.primary.default.hex}} 35%, transparent);
}

.theme-dark .highlight,
.theme-light .highlight {
    background: color-mix(in srgb, {{colors.primary.default.hex}} 30%, transparent);
    color: inherit;
}

/* unread pills + notification badges → primary */
.theme-dark span[class*="unreadPill"],
.theme-light span[class*="unreadPill"] {
    --interactive-text-active: {{colors.primary.default.hex}} !important;
}

.theme-dark div[class*="numberBadge"],
.theme-light div[class*="numberBadge"],
.theme-dark div[class*="newBadge"],
.theme-light div[class*="newBadge"],
.theme-dark div[class*="divider"] [class*="endCap"],
.theme-light div[class*="divider"] [class*="endCap"],
.theme-dark span[class*="botTag"],
.theme-light span[class*="botTag"],
.theme-dark div[class*="newMessagesBar"],
.theme-light div[class*="newMessagesBar"] {
    --white: {{colors.on_primary.default.hex}} !important;
    --white-500: {{colors.on_primary.default.hex}} !important;
}