@use 'sass:color';
@use 'colors';
@use 'typography';
@use 'spacing';
@use 'effects';
@use 'layout';
@use 'mixins';

:root {
	--font-family: 'AGrot', system-ui, sans-serif;

	// Spacing variables
	--unit: #{spacing.$unit};
	--unit-2x: #{spacing.$unit-2x};
	--unit-3x: #{spacing.$unit-3x};
	--unit-4x: #{spacing.$unit-4x};
	--unit-5x: #{spacing.$unit-5x};
	--unit-6x: #{spacing.$unit-6x};
	--unit-8x: #{spacing.$unit-8x};
	--unit-10x: #{spacing.$unit-10x};
	--unit-12x: #{spacing.$unit-12x};
	--unit-14x: #{spacing.$unit-14x};
	--unit-20x: #{spacing.$unit-20x};

	// Common spacing combinations
	--spacing-xs: #{spacing.$unit};
	--spacing-sm: #{spacing.$unit-2x};
	--spacing-md: #{spacing.$unit-4x};
	--spacing-lg: #{spacing.$unit-8x};
	--spacing-xl: #{spacing.$unit-12x};
	--spacing-2xl: #{spacing.$unit-14x};

	--background: #{colors.$page--bg--light};
	--background-rgb: 245, 245, 245; // RGB values for grey-90

	--page-bg: #{colors.$page--bg--light};
	--page-hover: #{colors.$page--hover--light};

	--grid-rep-hover: #{colors.$grid--rep--hover--light};

	--list-cell-bg: #{colors.$list--cell--bg--light};
	--list-cell-bg-hover: #{colors.$list--cell--bg--light--hover};

	--card-bg: #{colors.$grey-100};
	--bar-bg: #{colors.$grey-100};

	--link-text-hover: #{colors.$text--link--hover--light};

	--charge-attack-bg: #{colors.$charge--attack--bg};
	--charge-attack-text: #{colors.$charge--attack--text};
	--full-auto-bg: #{colors.$full--auto--bg};
	--full-auto-text: #{colors.$charge--attack--text};
	--auto-guard-bg: #{colors.$auto--guard--bg};
	--auto-guard-text: #{colors.$auto--guard--text};

	--full-auto-label-text: #{colors.$text--full--auto--light};

	--separator-bg: #{colors.$separator--bg--light};

	--accent-blue: #{colors.$accent--blue--light};
	--accent-blue-focus: #{colors.$accent--blue--light--focus};

	--accent-yellow: #{colors.$accent--yellow--light};

	--selected-item-bg: #{colors.$selected--item--bg--light};
	--selected-item-bg-hover: #{colors.$selected--item--bg--light--hover};
	--anonymous-bg: #{colors.$anonymous--bg--light};

	--placeholder-bg: #{colors.$grey-80};
	--placeholder-bg-accent: #{colors.$grey-75};

	--transparent-stroke: #{colors.$transparent--stroke--light};

	// Light - Units
	--unit-bg: #{colors.$unit--bg--light};
	--unit-bg-hover: #{colors.$unit--bg--light--hover};

	// Light - Sidebar
	--sidebar-bg: #{colors.$sidebar--bg--light};

	// Light - Dialogs
	--dialog-bg: #{colors.$dialog--bg--light};

	// Light - Menus
	--menu-bg: #{colors.$menu--bg--light};
	--menu-separator: #{colors.$menu--separator--light};
	--menu-text: #{colors.$menu--text--light};
	--menu-bg-item-hover: #{colors.$menu--item--bg--light--hover};
	--menu-text-hover: #{colors.$menu--text--light--hover};

	// Light - Formatting menu
	--formatting-menu-bg: #{colors.$formatting--menu--bg--light};
	--formatting-menu-item-bg: #{colors.$formatting--menu--item--bg--light};
	--formatting-menu-item-bg-hover: #{colors.$formatting--menu--item--bg--light--hover};
	--formatting-menu-item-bg-active: #{colors.$formatting--menu--item--bg--dark--active};
	--formatting-menu-item-text: #{colors.$formatting--menu--item--text--light};
	--formatting-menu-item-text-hover: #{colors.$formatting--menu--item--text--light--hover};
	--formatting-menu-item-text-active: #{colors.$formatting--menu--item--text--dark--active};

	// Light - Toolbar
	--toolbar-bg: #{colors.$toolbar--bg--light};
	--toolbar-divider-bg: #{colors.$toolbar--divider--bg--light};
	--toolbar-item-bg: #{colors.$toolbar--item--bg--light};
	--toolbar-item-bg-hover: #{colors.$toolbar--item--bg--light--hover};
	--toolbar-item-bg-active: #{colors.$toolbar--item--bg--light--active};
	--toolbar-item-text: #{colors.$toolbar--item--text--light};
	--toolbar-item-text-hover: #{colors.$toolbar--item--text--light--hover};
	--toolbar-item-text-active: #{colors.$toolbar--item--text--light--active};

	// Light - Highlights
	--highlight-bg: #{colors.$highlight--bg--light};
	--highlight-bg-hover: #{colors.$highlight--bg--light--hover};
	--highlight-text: #{colors.$highlight--text--light};
	--highlight-text-hover: #{colors.$highlight--text--light--hover};

	// Light - Placeholders
	--placeholder-bound-bg: #{colors.$placeholder--bound--bg--light};
	--placeholder-bound-bg-hover: #{colors.$placeholder--bound--bg--light--hover};

	// Light - Notices
	--notice-bg: #{colors.$notice--bg--light};
	--notice-text: #{colors.$notice--text--light};

	--notice-button-bg: #{colors.$notice--button--bg--light};
	--notice-button-bg-hover: #{colors.$notice--button--bg--light--hover};
	--notice-button-text: #{colors.$notice--button--text--light};
	--notice-button-text-hover: #{colors.$notice--button--text--light--hover};

	// Light - Buttons
	--button-bg: #{colors.$button--bg--light};
	--button-bg-hover: #{colors.$button--bg--light--hover};
	--button-bg-disabled: #{colors.$button--bg--light--disabled};
	--button-contained-bg: #{colors.$button--contained--bg--light};
	--button-contained-bg-hover: #{colors.$button--contained--bg--light--hover};

	--button-text: #{colors.$button--text--light};
	--button-text-hover: #{colors.$button--text--light--hover};
	--button-text-disabled: #{colors.$button--text--light--disabled};

	// Light - Button variants
	--button-secondary-bg: #{colors.$button--secondary--bg--light};
	--button-secondary-bg-hover: #{colors.$button--secondary--bg--light--hover};
	--button-secondary-text: #{colors.$button--secondary--text--light};
	--button-secondary-text-hover: #{colors.$button--secondary--text--light--hover};

	--button-primary-bg: #{colors.$button--primary--bg--light};
	--button-primary-bg-hover: #{colors.$button--primary--bg--light--hover};
	--button-primary-text: #{colors.$button--primary--text--light};
	--button-primary-border: #{colors.$button--primary--border--light};

	// Light - Inputs
	--input-bg: #{colors.$input--bg--light};
	--input-bg-hover: #{colors.$input--bg--light--hover};
	--input-bound-bg: #{colors.$input--bound--bg--light};
	--input-bound-bg-hover: #{colors.$input--bound--bg--light--hover};
	--input-section-bg: #{colors.$input--section--bg--light};

	// Light - Checkboxes
	--checkbox-bg: #{colors.$checkbox--bg--light};
	--checkbox-bg-hover: #{colors.$checkbox--bg--light--hover};
	--checkbox-text: #{colors.$checkbox--text--light};
	--checkbox-text-hover: #{colors.$checkbox--text--light--hover};

	// Light - Selects
	--select-bg: #{colors.$select--trigger--bg--light};
	--select-contained-bg: #{colors.$select--trigger--contained--bg--light};
	--select-contained-bg-hover: #{colors.$select--trigger--contained--bg--light--hover};
	--select-separator: #{colors.$select--separator--light};
	--select-content-contained-bg: #{colors.$select--content--contained--bg--light};
	--option-bg-hover: #{colors.$option--bg--light--hover};

	// Light - Sliders
	--slider-thumb-bg: #{colors.$slider--thumb--bg--light};
	--slider-thumb-bg-hover: #{colors.$slider--thumb--bg--light--hover};
	--slider-thumb-shadow: #{colors.$slider--thumb--shadow--light};
	--slider-thumb-shadow-hover: #{colors.$slider--thumb--shadow--light--hover};

	// Light - Radio Buttons
	--radio-button-bg: #{colors.$radio--bg--light};
	--radio-button-bg-hover: #{colors.$radio--bg--light--hover};

	--radio-active-bg: #{colors.$radio--active--bg--light};
	--radio-active-bg-hover: #{colors.$radio--active--bg--light--hover};

	// Light - About
	--link-item-bg: #{colors.$link--item--bg--light};
	--link-item-image-color: #{colors.$link--item--bg--image--light};
	--link-item-image-color-hover: #{colors.$link--item--bg--image--light--hover};

	// Light - Borders
	--border-subtle: #{colors.$border--subtle--light};
	--border-medium: #{colors.$border--medium--light};

	// Light - Text
	--text-primary: #{colors.$text--primary--color--light};
	--text-secondary: #{colors.$text--secondary--color--light};

	--text-tertiary: #{colors.$text--tertiary--color--light};
	--text-tertiary-hover: #{colors.$text--tertiary--hover--light};

	// Light - Icons
	--icon-secondary: #{colors.$icon--secondary--color--light};
	--icon-secondary-hover: #{colors.$icon--secondary--hover--light};

	// Light - Danger/Error
	--danger: #{colors.$error};
	--danger-bg: #{colors.$error--bg--light};

	// Light - Tags
	--tag-bg: #{colors.$tag--bg--light};
	--tag-text: #{colors.$tag--text--light};

	// Light - Segmented Controls
	// Variant 1: Blended (white bg with gray segments)
	--segmented-control-blended-bg: #{colors.$segmented--control--blended--bg--light};
	--segmented-control-blended-segment-bg: #{colors.$segmented--control--blended--segment--bg--light};
	--segmented-control-blended-segment-bg-hover: #{colors.$segmented--control--blended--segment--bg--hover--light};
	--segmented-control-blended-segment-bg-checked: #{colors.$segmented--control--blended--segment--bg--checked--light};
	--segmented-control-blended-segment-text: #{colors.$segmented--control--blended--segment--text--light};
	--segmented-control-blended-segment-text-hover: #{colors.$segmented--control--blended--segment--text--hover--light};
	--segmented-control-blended-segment-text-checked: #{colors.$segmented--control--blended--segment--text--checked--light};

	// Variant 2: Background (light bg with white segments)
	--segmented-control-background-bg: #{colors.$segmented--control--background--bg--light};
	--segmented-control-background-segment-bg: #{colors.$segmented--control--background--segment--bg--light};
	--segmented-control-background-segment-bg-hover: #{colors.$segmented--control--background--segment--bg--hover--light};
	--segmented-control-background-segment-bg-checked: #{colors.$segmented--control--background--segment--bg--checked--light};
	--segmented-control-background-segment-text: #{colors.$segmented--control--background--segment--text--light};
	--segmented-control-background-segment-text-hover: #{colors.$segmented--control--background--segment--text--hover--light};
	--segmented-control-background-segment-text-checked: #{colors.$segmented--control--background--segment--text--checked--light};

	// Light - Extra Weapons
	--extra-purple-bg: #{colors.$extra--purple--bg--light};
	--extra-purple-card-bg: #{colors.$extra--purple--card--bg--light};
	--extra-purple-primary: #{colors.$extra--purple--primary--light};
	--extra-purple-secondary: #{colors.$extra--purple--secondary--light};
	--extra-purple-light-text: #{colors.$extra--purple--light--text--light};
	--extra-purple-text: #{colors.$extra--purple--text--light};
	--extra-purple-dark-text: #{colors.$extra--purple--dark--text--dark};

	--switch-nub: #{colors.$switch--nub--bg--light};

	// Light - Subaura Summons
	--subaura-orange-bg: #{colors.$subaura--orange--bg--light};
	--subaura-orange-card-bg: #{colors.$subaura--orange--card--bg--light};
	--subaura-orange-primary: #{colors.$subaura--orange--primary--light};
	--subaura-orange-secondary: #{colors.$subaura--orange--secondary--light};
	--subaura-orange-text: #{colors.$subaura--orange--text--light};

	// Light - Pills
	--pill-bg: #{colors.$pill--bg--light};
	--pill-bg-hover: #{colors.$pill--bg--light--hover};
	--pill-text: #{colors.$pill--text--light};
	--pill-text-hover: #{colors.$pill--text--light--hover};

	// Light - Element Toggle
	--toggle-bg: #{colors.$toggle--bg--light};
	--toggle-stroke: #{colors.$toggle--stroke--light};

	--grid-border-color: #{colors.$grid--border--color--light};

	// Light - Element theming
	--null-bg: #{colors.$null--bg--light};
	--null-bg-hover: #{colors.$null--bg--hover--light};
	--null-text: #{colors.$null--text--light};
	--null-text-contrast: #{colors.$null--text--light};
	--null-raid-text: #{colors.$null--text--raid--light};
	--null-text-hover: #{colors.$null--text--hover--light};
	--null-shadow: #{colors.$null--shadow--light};
	--null-shadow-hover: #{colors.$null--shadow--light--hover};
	--null-accent: #{colors.$grey-70};

	// Light - Element button colors
	--null-button-bg: #{colors.$grey-55};
	--wind-button-bg: #{colors.$wind-text-30};
	--fire-button-bg: #{colors.$fire-text-30};
	--water-button-bg: #{colors.$water-text-30};
	--earth-button-bg: #{colors.$earth-text-20};
	--light-button-bg: #{colors.$light-text-30};
	--dark-button-bg: #{colors.$dark-text-30};

	// Light - Element button hover colors (slightly lighter than button-bg)
	--null-button-bg-hover: #{colors.$grey-60};
	--wind-button-bg-hover: #{color.adjust(colors.$wind-text-30, $lightness: 8%)};
	--fire-button-bg-hover: #{color.adjust(colors.$fire-text-30, $lightness: 8%)};
	--water-button-bg-hover: #{color.adjust(colors.$water-text-30, $lightness: 8%)};
	--earth-button-bg-hover: #{color.adjust(colors.$earth-text-20, $lightness: 8%)};
	--light-button-bg-hover: #{color.adjust(colors.$light-text-30, $lightness: 8%)};
	--dark-button-bg-hover: #{color.adjust(colors.$dark-text-30, $lightness: 8%)};

	// Light - Element navigation selected background
	--null-nav-selected-bg: #{colors.$grey-85};
	--wind-nav-selected-bg: #{colors.$wind-bg-20};
	--fire-nav-selected-bg: #{colors.$fire-bg-20};
	--water-nav-selected-bg: #{colors.$water-bg-20};
	--earth-nav-selected-bg: #{colors.$earth-bg-20};
	--light-nav-selected-bg: #{colors.$light-bg-20};
	--dark-nav-selected-bg: #{colors.$dark-bg-20};

	// Light - Element navigation hover background (between bg and nav-selected)
	--null-nav-hover-bg: #{colors.$grey-80};
	--wind-nav-hover-bg: #{colors.$wind-bg-15};
	--fire-nav-hover-bg: #{colors.$fire-bg-15};
	--water-nav-hover-bg: #{colors.$water-bg-15};
	--earth-nav-hover-bg: #{colors.$earth-bg-15};
	--light-nav-hover-bg: #{colors.$light-bg-15};
	--dark-nav-hover-bg: #{colors.$dark-bg-15};

	// Item detail backgrounds (same colors as nav selected)
	--null-item-detail-bg: #{colors.$grey-85};
	--wind-item-detail-bg: #{colors.$wind-bg-20};
	--fire-item-detail-bg: #{colors.$fire-bg-20};
	--water-item-detail-bg: #{colors.$water-bg-20};
	--earth-item-detail-bg: #{colors.$earth-bg-20};
	--light-item-detail-bg: #{colors.$light-bg-20};
	--dark-item-detail-bg: #{colors.$dark-bg-20};

	// Light - Element navigation selected text
	--null-nav-selected-text: #{colors.$grey-40};
	--wind-nav-selected-text: #{colors.$wind-text-20};
	--fire-nav-selected-text: #{colors.$fire-text-20};
	--water-nav-selected-text: #{colors.$water-text-10};
	--earth-nav-selected-text: #{colors.$earth-text-15};
	--light-nav-selected-text: #{colors.$light-text-20};
	--dark-nav-selected-text: #{colors.$dark-text-20};

	--wind-bg: #{colors.$wind--bg--light};
	--wind-bg-hover: #{colors.$wind--bg--hover--light};
	--wind-portrait-bg: #{colors.$wind--portrait--bg--light};
	--wind-text: #{colors.$wind--text--light};
	--wind-raid-text: #{colors.$wind--text--raid--light};
	--wind-text-hover: #{colors.$wind--text--hover--light};
	--wind-shadow: #{colors.$wind--shadow--light};
	--wind-shadow-hover: #{colors.$wind--shadow--light--hover};
	--wind-accent: #{colors.$wind--bg--light};

	--fire-bg: #{colors.$fire--bg--light};
	--fire-bg-hover: #{colors.$fire--bg--hover--light};
	--fire-portrait-bg: #{colors.$fire--portrait--bg--light};
	--fire-text: #{colors.$fire--text--light};
	--fire-text-contrast: #{colors.$fire--text--light};
	--fire-raid-text: #{colors.$fire--text--raid--light};
	--fire-text-hover: #{colors.$fire--text--hover--light};
	--fire-shadow: #{colors.$fire--shadow--light};
	--fire-shadow-hover: #{colors.$fire--shadow--light--hover};
	--fire-accent: #{colors.$fire--bg--light};

	--water-bg: #{colors.$water--bg--light};
	--water-bg-hover: #{colors.$water--bg--hover--light};
	--water-portrait-bg: #{colors.$water--portrait--bg--light};
	--water-text: #{colors.$water--text--light};
	--water-text-contrast: #{colors.$water--text--light};
	--water-raid-text: #{colors.$water--text--raid--light};
	--water-text-hover: #{colors.$water--text--hover--light};
	--water-shadow: #{colors.$water--shadow--light};
	--water-shadow-hover: #{colors.$water--shadow--light--hover};
	--water-accent: #{colors.$water--bg--light};

	--earth-bg: #{colors.$earth--bg--light};
	--earth-bg-hover: #{colors.$earth--bg--hover--light};
	--earth-portrait-bg: #{colors.$earth--portrait--bg--light};
	--earth-text: #{colors.$earth--text--light};
	--earth-text-contrast: #{colors.$earth--text--light};
	--earth-raid-text: #{colors.$earth--text--raid--light};
	--earth-text-hover: #{colors.$earth--text--hover--light};
	--earth-shadow: #{colors.$earth--shadow--light};
	--earth-shadow-hover: #{colors.$earth--shadow--light--hover};
	--earth-accent: #{colors.$earth--bg--light};

	--dark-bg: #{colors.$dark--bg--light};
	--dark-bg-hover: #{colors.$dark--bg--hover--light};
	--dark-portrait-bg: #{colors.$dark--portrait--bg--light};
	--dark-text: #{colors.$dark--text--light};
	--dark-text-contrast: #{colors.$dark--text--light};
	--dark-raid-text: #{colors.$dark--text--raid--light};
	--dark-text-hover: #{colors.$dark--text--hover--light};
	--dark-shadow: #{colors.$dark--shadow--light};
	--dark-shadow-hover: #{colors.$dark--shadow--light--hover};
	--dark-accent: #{colors.$dark--bg--light};

	--light-bg: #{colors.$light--bg--light};
	--light-bg-hover: #{colors.$light--bg--hover--light};
	--light-portrait-bg: #{colors.$light--portrait--bg--light};
	--light-text: #{colors.$light--text--light};
	--light-text-contrast: #{colors.$light--text--light};
	--light-raid-text: #{colors.$light--text--raid--light};
	--light-text-hover: #{colors.$light--text--hover--light};
	--light-shadow: #{colors.$light--shadow--light};
	--light-shadow-hover: #{colors.$light--shadow--light--hover};
	--light-accent: #{colors.$light--bg--light};

	// Toast notifications
	--toast-bg: #{colors.$grey-100};
	--toast-text: #{colors.$text--primary--color--light};
	--toast-text-secondary: #{colors.$text--secondary--color--light};
	--toast-border: #{colors.$border--subtle--light};
	--toast-success-bg: #e8f5e9;
	--toast-success-text: #2e7d32;
	--toast-error-bg: #{colors.$error--bg--light};
	--toast-error-text: #{colors.$error};
	--toast-warning-bg: #{colors.$notice--bg--light};
	--toast-warning-text: #{colors.$notice--text--light};
	--toast-info-bg: #e3f2fd;
	--toast-info-text: #1565c0;

	// Gradients
	--hero-gradient: #{effects.$hero--gradient--light};
	--hero-gradient-overlay: #{effects.$hero--gradient--light--overlay};
}

html[data-theme='dark'] {
	--background: #{colors.$page--bg--dark};
	--background-rgb: 25, 25, 25; // RGB values for grey-15
	--page-hover: #{colors.$page--hover--dark};
	--page-bg: #{colors.$page--bg--dark};

	--grid-rep-hover: #{colors.$grid--rep--hover--dark};

	--list-cell-bg: #{colors.$list--cell--bg--dark};
	--list-cell-bg-hover: #{colors.$list--cell--bg--dark--hover};

	--card-bg: #{colors.$page--element--bg--dark};
	--bar-bg: #{colors.$grey-20};

	--link-text-hover: #{colors.$text--link--hover--dark};

	--charge-attack-bg: #{colors.$charge--attack--bg};
	--charge-attack-text: #{colors.$charge--attack--text};

	--full-auto-bg: #{colors.$full--auto--bg};
	--full-auto-text: #{colors.$charge--attack--text};

	--full-auto-label-text: #{colors.$text--full--auto--dark};

	--separator-bg: #{colors.$separator--bg--dark};

	--accent-blue: #{colors.$accent--blue--dark};
	--accent-blue-focus: #{colors.$accent--blue--dark--focus};

	--accent-yellow: #{colors.$accent--yellow--dark};

	--selected-item-bg: #{colors.$selected--item--bg--dark};
	--selected-item-bg-hover: #{colors.$selected--item--bg--dark--hover};

	--anonymous-bg: #{colors.$anonymous--bg--dark};

	--placeholder-bg: #{colors.$grey-40};
	--placeholder-bg-accent: #{colors.$grey-45};

	--transparent-stroke: #{colors.$transparent--stroke--dark};

	// Dark - Units
	--unit-bg: #{colors.$unit--bg--dark};
	--unit-bg-hover: #{colors.$unit--bg--dark--hover};

	// Dark - Sidebar
	--sidebar-bg: #{colors.$sidebar--bg--dark};

	// Dark - Dialogs
	--dialog-bg: #{colors.$dialog--bg--dark};

	// Dark - Menus
	--menu-bg: #{colors.$menu--bg--dark};
	--menu-text: #{colors.$menu--text--dark};
	--menu-separator: #{colors.$menu--separator--dark};
	--menu-bg-item-hover: #{colors.$menu--item--bg--dark--hover};
	--menu-text-hover: #{colors.$menu--text--dark--hover};

	// Dark - Formatting menu
	--formatting-menu-bg: #{colors.$formatting--menu--bg--dark};
	--formatting-menu-item-bg: #{colors.$formatting--menu--item--bg--dark};
	--formatting-menu-item-bg-hover: #{colors.$formatting--menu--item--bg--dark--hover};
	--formatting-menu-item-bg-active: #{colors.$formatting--menu--item--bg--dark--active};
	--formatting-menu-item-text: #{colors.$formatting--menu--item--text--dark};
	--formatting-menu-item-text-hover: #{colors.$formatting--menu--item--text--dark--hover};
	--formatting-menu-item-text-active: #{colors.$formatting--menu--item--text--dark--active};

	// Dark - Toolbar
	--toolbar-bg: #{colors.$toolbar--bg--dark};
	--toolbar-divider-bg: #{colors.$toolbar--divider--bg--dark};
	--toolbar-item-bg: #{colors.$toolbar--item--bg--dark};
	--toolbar-item-bg-hover: #{colors.$toolbar--item--bg--dark--hover};
	--toolbar-item-bg-active: #{colors.$toolbar--item--bg--dark--active};
	--toolbar-item-text: #{colors.$toolbar--item--text--dark};
	--toolbar-item-text-hover: #{colors.$toolbar--item--text--dark--hover};
	--toolbar-item-text-active: #{colors.$toolbar--item--text--dark--active};

	// Dark - Highlights
	--highlight-bg: #{colors.$highlight--bg--dark};
	--highlight-bg-hover: #{colors.$highlight--bg--dark--hover};
	--highlight-text: #{colors.$highlight--text--dark};
	--highlight-text-hover: #{colors.$highlight--text--dark--hover};

	// Dark - Placeholders
	--placeholder-bound-bg: #{colors.$placeholder--bound--bg--dark};
	--placeholder-bound-bg-hover: #{colors.$placeholder--bound--bg--dark--hover};

	// Dark - Notices
	--notice-bg: #{colors.$notice--bg--dark};
	--notice-text: #{colors.$notice--text--dark};

	--notice-button-bg: #{colors.$notice--button--bg--dark};
	--notice-button-bg-hover: #{colors.$notice--button--bg--dark--hover};
	--notice-button-text: #{colors.$notice--button--text--dark};
	--notice-button-text-hover: #{colors.$notice--button--text--dark--hover};

	// Dark - Buttons
	--button-bg: #{colors.$button--bg--dark};
	--button-bg-hover: #{colors.$button--bg--dark--hover};
	--button-contained-bg-hover: #{colors.$button--contained--bg--dark--hover};
	--button-bg-disabled: #{colors.$button--bg--dark--disabled};
	--button-contained-bg: #{colors.$button--contained--bg--dark};

	--button-text: #{colors.$button--text--dark};
	--button-text-hover: #{colors.$button--text--dark--hover};
	--button-text-disabled: #{colors.$button--text--dark--disabled};

	// Dark - Button variants
	--button-secondary-bg: #{colors.$button--secondary--bg--dark};
	--button-secondary-bg-hover: #{colors.$button--secondary--bg--dark--hover};
	--button-secondary-text: #{colors.$button--secondary--text--dark};
	--button-secondary-text-hover: #{colors.$button--secondary--text--dark--hover};

	--button-primary-bg: #{colors.$button--primary--bg--dark};
	--button-primary-bg-hover: #{colors.$button--primary--bg--dark--hover};
	--button-primary-text: #{colors.$button--primary--text--dark};
	--button-primary-border: #{colors.$button--primary--border--dark};

	// Dark - Inputs
	--input-bg: #{colors.$input--bg--dark};
	--input-bg-hover: #{colors.$input--bg--dark--hover};
	--input-bound-bg: #{colors.$input--bound--bg--dark};
	--input-bound-bg-hover: #{colors.$input--bound--bg--dark--hover};
	--input-section-bg: #{colors.$input--section--bg--dark};

	// Dark - Checkboxes
	--checkbox-bg: #{colors.$checkbox--bg--dark};
	--checkbox-bg-hover: #{colors.$checkbox--bg--dark--hover};
	--checkbox-text: #{colors.$checkbox--text--dark};
	--checkbox-text-hover: #{colors.$checkbox--text--dark--hover};

	// Dark - Selects
	--select-bg: #{colors.$select--trigger--bg--dark};
	--select-contained-bg: #{colors.$select--trigger--contained--bg--dark};
	--select-contained-bg-hover: #{colors.$select--trigger--contained--bg--dark--hover};
	--select-separator: #{colors.$select--separator--dark};
	--select-content-contained-bg: #{colors.$select--content--contained--bg--dark};
	--option-bg-hover: #{colors.$option--bg--dark--hover};

	// Dark - Sliders
	--slider-thumb-bg: #{colors.$slider--thumb--bg--dark};
	--slider-thumb-bg-hover: #{colors.$slider--thumb--bg--dark--hover};
	--slider-thumb-shadow: #{colors.$slider--thumb--shadow--dark};
	--slider-thumb-shadow-hover: #{colors.$slider--thumb--shadow--dark--hover};

	// Dark - Radio Buttons
	--radio-button-bg: #{colors.$radio--bg--dark};
	--radio-button-bg-hover: #{colors.$radio--bg--dark--hover};

	--radio-active-bg: #{colors.$radio--active--bg--dark};
	--radio-active-bg-hover: #{colors.$radio--active--bg--dark--hover};

	// Dark - About
	--link-item-bg: #{colors.$link--item--bg--dark};
	--link-item-image-color: #{colors.$link--item--bg--image--dark};
	--link-item-image-color-hover: #{colors.$link--item--bg--image--dark--hover};

	// Dark - Borders
	--border-subtle: #{colors.$border--subtle--dark};
	--border-medium: #{colors.$border--medium--dark};

	// Dark - Text
	--text-primary: #{colors.$text--primary--color--dark};
	--text-secondary: #{colors.$text--secondary--color--dark};

	--text-tertiary: #{colors.$text--tertiary--color--dark};
	--text-tertiary-hover: #{colors.$text--tertiary--hover--dark};

	// Dark - Icons
	--icon-secondary: #{colors.$icon--secondary--color--dark};
	--icon-secondary-hover: #{colors.$icon--secondary--hover--dark};

	// Dark - Danger/Error
	--danger: #{colors.$error};
	--danger-bg: #{colors.$error--bg--dark};

	// Dark - Tags
	--tag-bg: #{colors.$tag--bg--dark};
	--tag-text: #{colors.$tag--text--dark};

	// Dark - Segmented Controls
	// Variant 1: Blended (dark bg with lighter segments)
	--segmented-control-blended-bg: #{colors.$segmented--control--blended--bg--dark};
	--segmented-control-blended-segment-bg: #{colors.$segmented--control--blended--segment--bg--dark};
	--segmented-control-blended-segment-bg-hover: #{colors.$segmented--control--blended--segment--bg--hover--dark};
	--segmented-control-blended-segment-bg-checked: #{colors.$segmented--control--blended--segment--bg--checked--dark};
	--segmented-control-blended-segment-text: #{colors.$segmented--control--blended--segment--text--dark};
	--segmented-control-blended-segment-text-hover: #{colors.$segmented--control--blended--segment--text--hover--dark};
	--segmented-control-blended-segment-text-checked: #{colors.$segmented--control--blended--segment--text--checked--dark};

	// Variant 2: Background (dark bg with lighter segments)
	--segmented-control-background-bg: #{colors.$segmented--control--background--bg--dark};
	--segmented-control-background-segment-bg: #{colors.$segmented--control--background--segment--bg--dark};
	--segmented-control-background-segment-bg-hover: #{colors.$segmented--control--background--segment--bg--hover--dark};
	--segmented-control-background-segment-bg-checked: #{colors.$segmented--control--background--segment--bg--checked--dark};
	--segmented-control-background-segment-text: #{colors.$segmented--control--background--segment--text--dark};
	--segmented-control-background-segment-text-hover: #{colors.$segmented--control--background--segment--text--hover--dark};
	--segmented-control-background-segment-text-checked: #{colors.$segmented--control--background--segment--text--checked--dark};

	// Dark - Extra Weapons
	--extra-purple-bg: #{colors.$extra--purple--bg--dark};
	--extra-purple-card-bg: #{colors.$extra--purple--card--bg--dark};
	--extra-purple-primary: #{colors.$extra--purple--primary--dark};
	--extra-purple-secondary: #{colors.$extra--purple--secondary--dark};
	--extra-purple-text-light: #{colors.$extra--purple--light--text--dark};
	--extra-purple-text: #{colors.$extra--purple--text--dark};
	--extra-purple-text-dark: #{colors.$extra--purple--dark--text--dark};

	--switch-nub: #{colors.$switch--nub--bg--dark};

	// Dark - Subaura Summons
	--subaura-orange-bg: #{colors.$subaura--orange--bg--dark};
	--subaura-orange-card-bg: #{colors.$subaura--orange--card--bg--dark};
	--subaura-orange-primary: #{colors.$subaura--orange--primary--dark};
	--subaura-orange-secondary: #{colors.$subaura--orange--secondary--dark};
	--subaura-orange-text: #{colors.$subaura--orange--text--dark};

	// Dark - Pills
	--pill-bg: #{colors.$pill--bg--dark};
	--pill-bg-hover: #{colors.$pill--bg--dark--hover};
	--pill-text: #{colors.$pill--text--dark};
	--pill-text-hover: #{colors.$pill--text--dark--hover};

	// Dark - Element Toggle
	--toggle-bg: #{colors.$toggle--bg--dark};
	--toggle-stroke: #{colors.$toggle--stroke--dark};

	--grid-border-color: #{colors.$grid--border--color--dark};

	// Dark - Element theming
	--null-bg: #{colors.$null--bg--dark};
	--null-bg-hover: #{colors.$null--bg--hover--dark};
	--null-text: #{colors.$null--text--dark};
	--null-contrast-text: #{colors.$null--text--contrast};
	--null-raid-text: #{colors.$null--text--raid--dark};
	--null-text-hover: #{colors.$null--text--hover--dark};
	--null-shadow: #{colors.$null--shadow--dark};
	--null-shadow-hover: #{colors.$null--shadow--dark--hover};
	--null-accent: #{colors.$grey-70};

	// Dark - Element button colors (same as light theme)
	--null-button-bg: #{colors.$grey-55};
	--wind-button-bg: #{colors.$wind-text-30};
	--fire-button-bg: #{colors.$fire-text-30};
	--water-button-bg: #{colors.$water-text-30};
	--earth-button-bg: #{colors.$earth-text-20};
	--light-button-bg: #{colors.$light-text-30};
	--dark-button-bg: #{colors.$dark-text-30};

	// Dark - Element button hover colors (same as light theme)
	--null-button-bg-hover: #{colors.$grey-60};
	--wind-button-bg-hover: #{color.adjust(colors.$wind-text-30, $lightness: 8%)};
	--fire-button-bg-hover: #{color.adjust(colors.$fire-text-30, $lightness: 8%)};
	--water-button-bg-hover: #{color.adjust(colors.$water-text-30, $lightness: 8%)};
	--earth-button-bg-hover: #{color.adjust(colors.$earth-text-20, $lightness: 8%)};
	--light-button-bg-hover: #{color.adjust(colors.$light-text-30, $lightness: 8%)};
	--dark-button-bg-hover: #{color.adjust(colors.$dark-text-30, $lightness: 8%)};

	// Dark - Element navigation selected background (same as light theme)
	--null-nav-selected-bg: #{colors.$grey-85};
	--wind-nav-selected-bg: #{colors.$wind-bg-20};
	--fire-nav-selected-bg: #{colors.$fire-bg-20};
	--water-nav-selected-bg: #{colors.$water-bg-20};
	--earth-nav-selected-bg: #{colors.$earth-bg-20};
	--light-nav-selected-bg: #{colors.$light-bg-20};
	--dark-nav-selected-bg: #{colors.$dark-bg-20};

	// Dark - Element navigation hover background (same as light theme)
	--null-nav-hover-bg: #{colors.$grey-80};
	--wind-nav-hover-bg: #{colors.$wind-bg-15};
	--fire-nav-hover-bg: #{colors.$fire-bg-15};
	--water-nav-hover-bg: #{colors.$water-bg-15};
	--earth-nav-hover-bg: #{colors.$earth-bg-15};
	--light-nav-hover-bg: #{colors.$light-bg-15};
	--dark-nav-hover-bg: #{colors.$dark-bg-15};

	// Item detail backgrounds (same colors as nav selected)
	--null-item-detail-bg: #{colors.$grey-85};
	--wind-item-detail-bg: #{colors.$wind-bg-20};
	--fire-item-detail-bg: #{colors.$fire-bg-20};
	--water-item-detail-bg: #{colors.$water-bg-20};
	--earth-item-detail-bg: #{colors.$earth-bg-20};
	--light-item-detail-bg: #{colors.$light-bg-20};
	--dark-item-detail-bg: #{colors.$dark-bg-20};

	// Dark - Element navigation selected text (same as light theme)
	--null-nav-selected-text: #{colors.$grey-40};
	--wind-nav-selected-text: #{colors.$wind-text-20};
	--fire-nav-selected-text: #{colors.$fire-text-20};
	--water-nav-selected-text: #{colors.$water-text-10};
	--earth-nav-selected-text: #{colors.$earth-text-15};
	--light-nav-selected-text: #{colors.$light-text-20};
	--dark-nav-selected-text: #{colors.$dark-text-20};

	--wind-bg: #{colors.$wind--bg--dark};
	--wind-bg-hover: #{colors.$wind--bg--hover--dark};
	--wind-portrait-bg: #{colors.$wind--portrait--bg--dark};
	--wind-text: #{colors.$wind--text--dark};
	--wind-raid-text: #{colors.$wind--text--raid--dark};
	--wind-text-contrast: #{colors.$wind--text--contrast};
	--wind-text-hover: #{colors.$wind--text--hover--dark};
	--wind-shadow: #{colors.$wind--shadow--dark};
	--wind-shadow-hover: #{colors.$wind--shadow--dark--hover};
	--wind-accent: #{colors.$wind--bg--dark};

	--fire-bg: #{colors.$fire--bg--dark};
	--fire-bg-hover: #{colors.$fire--bg--hover--dark};
	--fire-portrait-bg: #{colors.$fire--portrait--bg--dark};
	--fire-text: #{colors.$fire--text--dark};
	--fire-text-contrast: #{colors.$fire--text--contrast};
	--fire-raid-text: #{colors.$fire--text--raid--dark};
	--fire-text-hover: #{colors.$fire--text--hover--dark};
	--fire-shadow: #{colors.$fire--shadow--dark};
	--fire-shadow-hover: #{colors.$fire--shadow--dark--hover};
	--fire-accent: #{colors.$fire--bg--dark};

	--water-bg: #{colors.$water--bg--dark};
	--water-bg-hover: #{colors.$water--bg--hover--dark};
	--water-portrait-bg: #{colors.$water--portrait--bg--dark};
	--water-text: #{colors.$water--text--dark};
	--water-text-contrast: #{colors.$water--text--contrast};
	--water-raid-text: #{colors.$water--text--raid--dark};
	--water-text-hover: #{colors.$water--text--hover--dark};
	--water-shadow: #{colors.$water--shadow--dark};
	--water-shadow-hover: #{colors.$water--shadow--dark--hover};
	--water-accent: #{colors.$water--bg--dark};

	--earth-bg: #{colors.$earth--bg--dark};
	--earth-bg-hover: #{colors.$earth--bg--hover--dark};
	--earth-portrait-bg: #{colors.$earth--portrait--bg--dark};
	--earth-text: #{colors.$earth--text--dark};
	--earth-text-contrast: #{colors.$earth--text--contrast};
	--earth-raid-text: #{colors.$earth--text--raid--dark};
	--earth-text-hover: #{colors.$earth--text--hover--dark};
	--earth-shadow: #{colors.$earth--shadow--dark};
	--earth-shadow-hover: #{colors.$earth--shadow--dark--hover};
	--earth-accent: #{colors.$earth--bg--dark};

	--dark-bg: #{colors.$dark--bg--dark};
	--dark-bg-hover: #{colors.$dark--bg--hover--dark};
	--dark-portrait-bg: #{colors.$dark--portrait--bg--dark};
	--dark-text: #{colors.$dark--text--dark};
	--dark-text-contrast: #{colors.$dark--text--contrast};
	--dark-raid-text: #{colors.$dark--text--raid--dark};
	--dark-text-hover: #{colors.$dark--text--hover--dark};
	--dark-shadow: #{colors.$dark--shadow--dark};
	--dark-shadow-hover: #{colors.$dark--shadow--dark--hover};
	--dark-accent: #{colors.$dark--bg--dark};

	--light-bg: #{colors.$light--bg--dark};
	--light-bg-hover: #{colors.$light--bg--hover--dark};
	--light-portrait-bg: #{colors.$light--portrait--bg--dark};
	--light-text: #{colors.$light--text--dark};
	--light-text-contrast: #{colors.$light--text--contrast};
	--light-raid-text: #{colors.$light--text--raid--dark};
	--light-text-hover: #{colors.$light--text--hover--dark};
	--light-shadow: #{colors.$light--shadow--dark};
	--light-shadow-hover: #{colors.$light--shadow--dark--hover};
	--light-accent: #{colors.$light--bg--dark};

	// Toast notifications
	--toast-bg: #{colors.$grey-20};
	--toast-text: #{colors.$text--primary--color--dark};
	--toast-text-secondary: #{colors.$text--secondary--color--dark};
	--toast-border: #{colors.$border--subtle--dark};
	--toast-success-bg: #1b3d1f;
	--toast-success-text: #66bb6a;
	--toast-error-bg: #{colors.$error--bg--dark};
	--toast-error-text: #{colors.$error};
	--toast-warning-bg: #{colors.$notice--bg--dark};
	--toast-warning-text: #{colors.$notice--text--dark};
	--toast-info-bg: #0d2744;
	--toast-info-text: #64b5f6;

	// Gradients
	--hero-gradient: #{effects.$hero--gradient--dark};
	--hero-gradient-overlay: #{effects.$hero--gradient--dark--overlay};
}