glass_exo:
  # ===== font =====
  primary-font-family: '"Exo 2", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
  paper-font-common-base_-_font-family: '"Exo 2", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
  paper-font-body1_-_font-family: '"Exo 2", "SF Pro Display", -apple-system, sans-serif'
  paper-font-subhead_-_font-family: '"Exo 2", "SF Pro Display", -apple-system, sans-serif'
  paper-font-headline_-_font-family: '"Exo 2", "SF Pro Display", -apple-system, sans-serif'
  paper-font-title_-_font-family: '"Exo 2", "SF Pro Display", -apple-system, sans-serif'
  ha-card-header-font-family: '"Exo 2", "SF Pro Display", -apple-system, sans-serif'
  paper-font-common-base_-_-webkit-font-smoothing: 'antialiased'

  # ===== background (gradient + soft glow) =====
  lovelace-background: 'radial-gradient(1200px 800px at 15% 10%, rgba(99, 102, 241, 0.20) 0%, transparent 60%), radial-gradient(1000px 700px at 85% 90%, rgba(236, 72, 153, 0.18) 0%, transparent 55%), linear-gradient(135deg, #0b0f1a 0%, #0a0a14 45%, #060610 100%)'
  primary-background-color: '#0a0a14'
  secondary-background-color: '#10121c'
  app-header-background-color: 'rgba(10, 10, 20, 0.65)'
  app-header-text-color: '#e7e9f4'
  sidebar-background-color: 'rgba(10, 10, 20, 0.85)'
  sidebar-text-color: '#c7c9dc'
  sidebar-selected-text-color: '#a78bfa'
  sidebar-selected-background-color: 'rgba(167, 139, 250, 0.12)'
  sidebar-icon-color: '#8a8db0'
  sidebar-selected-icon-color: '#a78bfa'

  # ===== card (glass panel) =====
  ha-card-background: 'rgba(22, 24, 40, 0.88)'
  card-background-color: 'rgba(22, 24, 40, 0.88)'
  ha-card-border-radius: '18px'
  ha-card-border-width: '1px'
  ha-card-border-color: 'rgba(255, 255, 255, 0.08)'
  ha-card-box-shadow: '0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04)'
  ha-card-header-color: '#e7e9f4'

  # ===== more-info dialog / popup (opaque, readable) =====
  mdc-theme-surface: '#161828'
  mdc-dialog-scrim-color: 'rgba(0, 0, 0, 0.78)'
  dialog-backdrop-filter: 'blur(12px)'
  ha-dialog-surface-background: '#161828'
  ha-dialog-border-radius: '20px'

  # ===== text =====
  primary-text-color: '#e7e9f4'
  secondary-text-color: '#9a9cb8'
  text-primary-color: '#ffffff'
  disabled-text-color: '#5b5e78'

  # ===== accents =====
  primary-color: '#a78bfa'
  accent-color: '#f472b6'
  light-primary-color: '#c4b5fd'
  dark-primary-color: '#7c3aed'
  label-badge-background-color: 'rgba(22, 24, 40, 0.75)'
  label-badge-text-color: '#e7e9f4'
  label-badge-red: '#f87171'
  label-badge-green: '#4ade80'
  label-badge-blue: '#60a5fa'
  label-badge-yellow: '#fbbf24'
  label-badge-grey: '#9ca3af'

  # ===== state colors =====
  state-icon-color: '#a78bfa'
  state-icon-active-color: '#f472b6'
  state-icon-unavailable-color: '#6b7280'
  paper-item-icon-color: '#9a9cb8'
  paper-item-icon-active-color: '#f472b6'

  # ===== domain states =====
  state-binary-sensor-active-color: '#4ade80'
  state-light-active-color: '#fbbf24'
  state-switch-active-color: '#60a5fa'
  state-fan-active-color: '#38bdf8'
  state-climate-cooling-color: '#60a5fa'
  state-climate-heating-color: '#f87171'
  state-media-player-active-color: '#f472b6'
  state-person-home-color: '#4ade80'
  state-person-not_home-color: '#9ca3af'

  # ===== toggles / switches =====
  switch-checked-color: '#a78bfa'
  switch-checked-button-color: '#c4b5fd'
  switch-checked-track-color: 'rgba(167, 139, 250, 0.4)'
  switch-unchecked-button-color: '#6b7280'
  switch-unchecked-track-color: 'rgba(107, 114, 128, 0.4)'

  # ===== sliders =====
  paper-slider-knob-color: '#a78bfa'
  paper-slider-knob-start-color: '#a78bfa'
  paper-slider-pin-color: '#a78bfa'
  paper-slider-active-color: '#a78bfa'
  paper-slider-container-color: 'rgba(167, 139, 250, 0.25)'
  paper-slider-secondary-color: '#7c3aed'

  # ===== dividers / outlines =====
  divider-color: 'rgba(255, 255, 255, 0.08)'
  outline-color: 'rgba(255, 255, 255, 0.10)'

  # ===== input elements =====
  input-background-color: 'rgba(22, 24, 40, 0.70)'
  input-fill-color: 'rgba(22, 24, 40, 0.70)'
  input-ink-color: '#e7e9f4'
  input-label-ink-color: '#9a9cb8'
  input-idle-line-color: 'rgba(255, 255, 255, 0.12)'
  input-hover-line-color: '#a78bfa'
  input-focused-line-color: '#a78bfa'

  # ===== MDC select + text-field (dropdowns inside cards/dialogs) =====
  mdc-select-fill-color: 'rgba(22, 24, 40, 0.85)'
  mdc-select-ink-color: '#e7e9f4'
  mdc-select-label-ink-color: '#9a9cb8'
  mdc-select-dropdown-icon-color: '#a78bfa'
  mdc-select-idle-line-color: 'rgba(255, 255, 255, 0.18)'
  mdc-select-hover-line-color: '#a78bfa'
  mdc-select-focused-label-color: '#a78bfa'
  mdc-text-field-fill-color: 'rgba(22, 24, 40, 0.85)'
  mdc-text-field-ink-color: '#e7e9f4'
  mdc-text-field-label-ink-color: '#9a9cb8'
  mdc-text-field-idle-line-color: 'rgba(255, 255, 255, 0.18)'
  mdc-text-field-hover-line-color: '#a78bfa'
  mdc-text-field-focused-label-color: '#a78bfa'
  mdc-text-field-disabled-fill-color: 'rgba(22, 24, 40, 0.60)'
  mdc-text-field-disabled-ink-color: '#9a9cb8'
  mdc-text-field-outlined-idle-border-color: 'rgba(255,255,255,0.18)'
  mdc-text-field-outlined-hover-border-color: '#a78bfa'
  mdc-filled-text-field-container-color: 'rgba(22, 24, 40, 0.85)'
  mdc-filled-text-field-label-text-color: '#9a9cb8'
  mdc-filled-text-field-input-text-color: '#e7e9f4'
  ha-textfield-background: 'rgba(22, 24, 40, 0.85)'

  # ===== Assist voice-command dialog — card-mod CSS override =====
  card-mod-theme: glass_exo
  card-mod-root: |
    ha-voice-command-dialog $ ha-textfield {
      --mdc-text-field-fill-color: rgba(22, 24, 40, 0.92) !important;
      --mdc-text-field-ink-color: #e7e9f4 !important;
      --mdc-text-field-label-ink-color: #9a9cb8 !important;
      --mdc-text-field-idle-line-color: rgba(255,255,255,0.18) !important;
    }
    ha-voice-command-dialog $ ha-textfield $ .mdc-text-field__input {
      color: #e7e9f4 !important;
    }

  # ===== buttons =====
  mdc-theme-primary: '#a78bfa'
  mdc-theme-secondary: '#f472b6'
  mdc-theme-on-primary: '#ffffff'
  mdc-theme-on-secondary: '#ffffff'

  # ===== code / graph =====
  code-editor-background-color: 'rgba(10, 10, 20, 0.85)'
  graph-base-color: '#a78bfa'

  # ===== tables =====
  table-row-background-color: 'transparent'
  table-row-alternative-background-color: 'rgba(255, 255, 255, 0.02)'
