"""Constants for the Frosted Glass Theme Manager integration."""

DOMAIN = "frosted_glass_manager"

CONF_LIGHT_PRIMARY = "light_primary_color"
CONF_LIGHT_BG = "light_background_url"
CONF_DARK_PRIMARY = "dark_primary_color"
CONF_DARK_BG = "dark_background_url"
CONF_RESET = "reset_defaults"

# Predvolené RGB
DEFAULT_LIGHT_RGB = "106, 116, 211"
DEFAULT_DARK_RGB = "106, 116, 211"

DEFAULT_PALETTE = {
    "05": "#0D0E19",
    "10": "#131526",
    "20": "#20233F",
    "30": "#30345F",
    "40": "#40467F",
    "50": "#6A74D3", # Toto je ekvivalent k 106, 116, 211
    "60": "#8F97DE",
    "70": "#ADB3E7",
    "80": "#D2D5F2",
    "90": "#EAECF9",
    "95": "#F6F7FC",
}

DEFAULT_LIGHT_BG_URL = "https://cdn.jsdelivr.net/gh/wessamlauf/homeassistant-frosted-glass-themes@refs/heads/main/themes/frosted-glass-light-background.jpg"
DEFAULT_DARK_BG_URL = "https://cdn.jsdelivr.net/gh/wessamlauf/homeassistant-frosted-glass-themes@refs/heads/main/themes/frosted-glass-dark-background.jpg"

THEME_FILENAME = "Frosted Glass Custom.yaml"
LITE_THEME_FILENAME = "Frosted Glass Custom Lite.yaml"
# ==============================================================================
# 1. FULL THEME TEMPLATE
# ==============================================================================
THEME_TEMPLATE = """# Frosted Glass

Frosted Glass Custom:
  modes:
    light:
      card-mod-theme: "Frosted Glass Light"

      # =========================
      # HEADER (Top Bar)
      # =========================
      app-header-backdrop-filter: 'blur(6px) saturate(1.2)'
      app-header-background-color: 'rgba(234, 235, 238, 0.1)'
      app-header-text-color: 'rgba(19, 21, 54, 0.95)'
      app-header-edit-background-color: 'rgba(255, 255, 255, 0.8)'
      app-header-edit-text-color: 'rgba(19, 21, 54, 0.98)'
      app-theme-color: 'rgb(91, 138, 168)'

      # =========================
      # SIDEBAR / DRAWER
      # =========================
      sidebar-background-color: 'rgba(254, 244, 242, 0.7)'
      sidebar-icon-color: 'rgba(19, 21, 54, 0.6)'
      sidebar-text-color: 'rgba(19, 21, 54, 0.8)'
      sidebar-selected-icon-color: 'rgba(19, 21, 54, 0.95)'
      sidebar-selected-text-color: 'rgba(19, 21, 54, 0.98)'

      # =========================
      # DIALOGS
      # =========================
      ha-dialog-surface-backdrop-filter: 'blur(8px)'                    
      ha-dialog-surface-background: 'rgba(234, 235, 238, 0.7)'
      dialog-box-shadow: '0 12px 20px rgba(0, 0, 0, 0.15)'
      paper-dialog-background-color: 'rgba(234, 235, 238, 0.7)'
      mdc-dialog-scrim-color: 'rgba(0, 0, 0, 0.6)'

      # =========================
      # CARDS / CARD-MOD
      # =========================
      card-mod-card: |
        /* Base reset */
        ha-card {
          background: transparent;
          backdrop-filter: none;
          -webkit-backdrop-filter: none;
        }

        /* Glass layer */
        ha-card::before {
          content: '';
          position: absolute;
          inset: 0;
          background: var(--ha-card-glass-tint, rgba(255, 255, 255, 0.08));
          backdrop-filter: var(--ha-card-backdrop-filter, blur(8px) saturate(1.2));
          -webkit-backdrop-filter: var(--ha-card-backdrop-filter, blur(8px) saturate(1.2));
          z-index: -1;
          pointer-events: none;
          border-radius: inherit;
          box-shadow: var(--ha-card-glass-inset-shadow,
            3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.30) inset,
            -2px -2px 0.5px -2px rgba(255, 255, 255, 0.30) inset,
            0 0 8px 1px rgba(255, 255, 255, 0.10) inset,
            0 0 2px 0 rgba(0, 0, 0, 0.10)
          );
        }

        /* Headings + Glance */
        :host(hui-heading-card) ha-card,
        :host(hui-glance-card) ha-card {
          background: none !important;
          backdrop-filter: none !important;
          -webkit-backdrop-filter: none !important;
        }
        :host(hui-heading-card) ha-card::before,
        :host(hui-glance-card) ha-card::before {
          content: none !important;
        }

        /* Data tables */
        .mdc-data-table {
          background: none !important;
        }
        .mdc-data-table__header-cell {
          background: rgba(255, 255, 255, 0.1) !important;
          backdrop-filter: var(--ha-card-backdrop-filter) !important;
          -webkit-backdrop-filter: var(--ha-card-backdrop-filter) !important;
          box-shadow: var(--ha-card-glass-inset-shadow) !important;
        }

        /* Markdown card with text_only */
        :host(.text-only) ha-card,
        :host(.text-only) ha-card::before,
        ha-card.text-only,
        ha-card.text-only::before {
          background: none !important;
          backdrop-filter: none !important;
          -webkit-backdrop-filter: none !important;
          box-shadow: none !important;
          content: none !important;
        }

        /* Mushroom title card */
        :host(mushroom-title-card) ha-card {
          background: none !important;
          backdrop-filter: none !important;
          -webkit-backdrop-filter: none !important;
          box-shadow: none !important;
        }
        :host(mushroom-title-card) ha-card::before {
          content: none !important;
        }

        /* Bubble cards */
        :host(.type-custom-bubble-card) ha-card {
          background: none !important;
          backdrop-filter: none !important;
          -webkit-backdrop-filter: none !important;
          box-shadow: none !important;
          border-radius: 0px !important;
        }
        :host(.type-custom-bubble-card) ha-card::before {
          content: none !important;
          background: none !important;
          backdrop-filter: none !important;
          -webkit-backdrop-filter: none !important;
        }

        /* Mushroom chips */
        :host(mushroom-chips-card) ha-card {
          background: none !important;
          backdrop-filter: none !important;
          -webkit-backdrop-filter: none !important;
          box-shadow: none !important;
        }
        :host(mushroom-chips-card) ha-card::before {
          content: none !important;
          background: none !important;
          backdrop-filter: none !important;
          -webkit-backdrop-filter: none !important;
        }

      # =========================
      # CARD-MOD-ROOT GLOBAL CSS
      # =========================
      card-mod-root: |
       :host {
        --ha-card-background: rgba(242, 245, 255, 0.1);
        --ha-card-box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
        --ha-card-border-width: 0.5px;
        --ha-card-border-color: rgba(255, 255, 255, 0.3);
        --ha-card-backdrop-filter: blur(8px) saturate(1.2);

        /* Glass system tokens */
        --ha-card-glass-tint: rgba(255, 255, 255, 0.08);
        --ha-card-glass-inset-shadow:
          3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.30) inset,
          -2px -2px 0.5px -2px rgba(255, 255, 255, 0.30) inset,
          0 0 8px 1px rgba(255, 255, 255, 0.10) inset,
          0 0 2px 0 rgba(0, 0, 0, 0.10);
       }

       custom-text-divider-row .text-divider-content {
        background: #fff !important;
        opacity: 1 !important;
        box-shadow: none !important;
        border-radius: 10px !important;
        padding: 0 8px !important;
        --text-divider-font-size: 16px !important;
        --text-divider-line-size: 1px;
        --text-divider-color: rgba(19, 21, 54, 1) !important;
       }

        
          # Tokens
          --token-rgb-primary: 106, 116, 211;
          --token-rgb-black: 0, 0, 0;
          --token-rgb-white: 240, 243, 255;
          --token-rgb-purple: 129, 45, 250;
          --token-rgb-pink: 204, 0, 136;
          --token-rgb-red: 204, 0, 51;
          --token-rgb-deep-purple: 98, 0, 234;
          --token-rgb-indigo: 48, 63, 159;
          --token-rgb-blue: 33, 150, 243;
          --token-rgb-light-blue: 3, 169, 244;
          --token-rgb-cyan: 106, 116, 211;
          --token-rgb-teal: 106, 116, 211;
          --token-rgb-green: 56, 142, 60;
          --token-rgb-light-green: 139, 195, 74;
          --token-rgb-lime: 205, 220, 57;
          --token-rgb-yellow: 250, 183, 0;
          --token-rgb-amber: 255, 193, 7;
          --token-rgb-orange: 255, 158, 0;
          --token-rgb-deep-orange: 255, 87, 34;
          --token-rgb-brown: 121, 85, 72;
          --token-rgb-grey: 103, 104, 119;
          --token-rgb-blue-grey: 96, 125, 139;
          --token-rgb-disabled: 189, 189, 189;
          --token-rgb-state-inactive: 176, 190, 197;

          --token-color-primary: rgb(var(--token-rgb-primary));
          --token-color-primary-light: rgb(167 182 199);
          --token-color-accent: rgb(var(--token-rgb-teal));
          --token-color-disabled: rgb(173 176 184);
          --token-color-feedback-info: rgb(106, 116, 211);
          --token-color-feedback-warning: rgb(255, 219, 117);
          --token-color-feedback-error: rgb(234, 114, 135);
          --token-color-feedback-success: rgb(118, 214, 152);
          --token-color-icon-primary: rgba(19, 21, 54, 0.95);
          --token-color-icon-secondary: rgba(19, 21, 54, 0.75);
          --token-color-icon-sidebar: rgba(19, 21, 54, 0.6);
          --token-color-icon-sidebar-selected: var(--token-color-icon-primary);
          --token-color-text-primary: rgba(19, 21, 54, 0.98);
          --token-color-text-secondary: rgba(19, 21, 54, 0.8);
          --token-color-text-disabled: rgba(19, 21, 54, 0.45);
          --token-color-text-sidebar-selected: var(--token-color-text-primary);
          --token-color-text-sidebar: var(--token-color-text-secondary);
          --token-color-text-label-badge: rgba(19, 21, 54, 0.85);
          --token-color-text-chip: rgb(var(--token-rgb-black));
          --token-color-background-base: rgba(234, 235, 238, 0.6);
          --token-color-background-secondary: rgba(245, 245, 245, 0.5);
          --token-color-background-sidebar: var(--token-color-background-base);
          --token-color-background-input-base: rgba(255, 255, 255, 0.7);
          --token-color-background-input-disabled: rgba(245, 245, 245, 0.6);
          --token-color-background-label-badge: rgb(230, 230, 230);
          --token-color-background-card: rgba(255, 255, 255, 0.85);
          --token-color-background-skrim: rgba(0, 0, 0, 0.6);
          --token-color-background-divider: rgba(224, 224, 224, 0.3);
          --token-color-background-scrollbar-thumb: rgb(180, 180, 180);
          --token-color-background-label-badge-red: var(--token-color-feedback-error);
          --token-color-background-label-badge-blue: var(--token-color-feedback-info);
          --token-color-background-label-badge-green: rgb(78, 183, 128);
          --token-color-background-label-badge-yellow: var(--token-color-feedback-warning);
          --token-color-background-label-badge-grey: rgb(83, 90, 103);
          --token-color-background-popup-scrim: rgba(0, 0, 0, 1);
          --token-color-border-card: rgba(255, 255, 255, 0.3);
          --token-color-switch-button-unchecked: rgba(0, 0, 0, 0.6);
          --token-color-switch-track-unchecked: rgba(0, 0, 0, 0.3);
          --token-color-codemirror-string: rgb(0, 77, 153);
          --token-color-codemirror-keyword: rgb(70, 112, 216);
          --token-color-codemirror-number: rgb(204, 85, 0);
          --token-shadow-card-medium: 0 12px 20px rgba(0, 0, 0, 0.15);
          --token-size-radius-small: 10px;
          --token-size-radius-medium: 14px;
          --token-size-radius-large: 18px;
          --token-size-radius-card: var(--token-size-radius-large);
          --token-size-width-border-card: 0.5px;
          --token-size-height-slider: 5px;
          --token-size-height-navbar: 60px;
          --token-size-font-xs: calc(10px * var(--ha-font-size-scale));
          --token-size-font-s: calc(12px * var(--ha-font-size-scale));
          --token-size-font-m: calc(14px * var(--ha-font-size-scale));
          --token-size-font-l: calc(15px * var(--ha-font-size-scale));
          --token-size-font-xl: calc(20px * var(--ha-font-size-scale));
          --token-size-font-2xl: calc(25px * var(--ha-font-size-scale));
          --token-size-font-3xl: calc(29px * var(--ha-font-size-scale));
          --token-size-font-4xl: calc(33px * var(--ha-font-size-scale));
          --token-size-font-5xl: calc(42px * var(--ha-font-size-scale));
          --token-size-spacing-medium: 17px;
          --token-size-section-min-width: 320px;
          --token-color-transparent: rgba(0, 0, 0, 0);
          --token-color-black: rgb(0, 0, 0);
          --token-color-white: rgb(255, 255, 255);
          --token-opacity-ripple-hover: 0.1;
          --token-font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
          --token-weight-font-title-card: 500;

          # Additional color variables
          --token-color-red: rgb(var(--token-rgb-red));
          --token-color-green: rgb(var(--token-rgb-green));
          --token-color-blue: rgb(var(--token-rgb-blue));
          --token-color-yellow: rgb(var(--token-rgb-yellow));
          --token-color-orange: rgb(var(--token-rgb-orange));
          --token-color-purple: rgb(var(--token-rgb-purple));
          --token-color-pink: rgb(var(--token-rgb-pink));
          --token-color-amber: rgb(var(--token-rgb-amber));
          --token-color-cyan: rgb(var(--token-rgb-cyan));
          --token-color-teal: rgb(var(--token-rgb-teal));
          --token-color-lime: rgb(var(--token-rgb-lime));
          --token-color-light-green: rgb(var(--token-rgb-light-green));
          --token-color-deep-orange: rgb(var(--token-rgb-deep-orange));
          --token-color-brown: rgb(var(--token-rgb-brown));
          --token-color-grey: rgb(var(--token-rgb-grey));
          --token-color-blue-grey: rgb(var(--token-rgb-blue-grey));
          --token-color-indigo: rgb(var(--token-rgb-indigo));
          --token-color-deep-purple: rgb(var(--token-rgb-deep-purple));
          --token-color-light-blue: rgb(var(--token-rgb-light-blue));
        }

        /* SIDEBAR BLUR */
        .mdc-drawer .mdc-drawer__content {
          backdrop-filter: blur(6px) saturate(1.2) !important;
          -webkit-backdrop-filter: blur(6px) saturate(1.2) !important;
          background: rgba(234, 235, 238, 0.7) !important;
          box-shadow: var(--ha-card-glass-inset-shadow) !important;
        }

        /* CARDS RADIUS */
        ha-card {
          border-radius: var(--token-size-radius-large);
          border: var(--ha-card-border, var(--ha-card-border-width) solid var(--ha-card-border-color));
          box-shadow: var(--ha-card-box-shadow);
        }
        ha-card ha-card {
          --ha-card-border-width: 0px;
        }

        /* DRAWER SCRIM */
        ha-drawer {
          --mdc-drawer-scrim-color: rgba(0, 0, 0, 0.6) !important;
        }

        /* LABEL BADGE */
        ha-label-badge {
          --label-badge-background-color: rgba(230, 230, 230, 0.2) !important;
          backdrop-filter: blur(12px) saturate(1.1) !important;
          -webkit-backdrop-filter: blur(12px) saturate(1.1) !important;
          --label-badge-text-color: rgba(19, 21, 54, 0.9) !important;
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05) !important;
          border: 0.5px solid rgba(255, 255, 255, 0.3) !important;
        }

        /* INPUTS */
        input, ha-textfield, ha-select {
          background: rgba(255, 255, 255, 0.7) !important;
          backdrop-filter: blur(6px) !important;
          -webkit-backdrop-filter: blur(6px);
          border-radius: var(--token-size-radius-small);
          border: none !important;
          box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05) !important;
        }

      # =========================
      # TYPOGRAPHY
      # =========================
      ha-font-family-body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      ha-font-family-heading: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      ha-font-family-code: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      ha-font-family-longform: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      ha-card-header-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      mdc-typography-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      mdc-typography-button-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      mdc-typography-body1-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      md-list-item-label-text-font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      paper-font-common-base_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      paper-font-common-code_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      paper-font-body1_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      paper-font-subhead_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      paper-font-headline_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      paper-font-caption_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      paper-font-title_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'

      ha-font-weight-normal: '400'
      ha-font-weight-medium: '500'
      ha-font-weight-bold: '700'
      ha-font-weight-body: '400'
      ha-font-weight-heading: '500'
      ha-font-weight-action: '500'
      mdc-typography-button-font-weight: '500'
      title-font-weight: 'var(--token-weight-font-title-card)'

      ha-font-size-xs: '10px'
      ha-font-size-s: '12px'
      ha-font-size-m: '14px'
      ha-font-size-l: '15px'
      ha-font-size-xl: '20px'
      ha-font-size-2xl: '25px'
      ha-font-size-3xl: '29px'
      ha-font-size-4xl: '33px'
      ha-font-size-5xl: '42px'
      title-font-size: '20px'
      ha-heading-card-title-font-size: 'var(--token-size-font-l)'
      ha-heading-card-title-font-weight: '500'
      ha-font-smoothing: 'antialiased'

      # =========================
      # COLORS & MISCELLANEOUS
      # =========================
      ha-color-primary-05: '#0D0E19'
      ha-color-primary-10: '#131526'
      ha-color-primary-20: '#20233F'
      ha-color-primary-30: '#30345F'
      ha-color-primary-40: '#40467F'
      ha-color-primary-50: '#6A74D3'
      ha-color-primary-60: '#8F97DE'
      ha-color-primary-70: '#ADB3E7'
      ha-color-primary-80: '#D2D5F2'
      ha-color-primary-90: '#EAECF9'
      ha-color-primary-95: '#F6F7FC'

      color-primary-05: '#0D0E19'
      color-primary-10: '#131526'
      color-primary-20: '#20233F'
      color-primary-30: '#30345F'
      color-primary-40: '#40467F'
      color-primary-50: '#6A74D3'
      color-primary-60: '#8F97DE'
      color-primary-70: '#ADB3E7'
      color-primary-80: '#D2D5F2'
      color-primary-90: '#EAECF9'
      color-primary-95: '#F6F7FC'
      primary-text-color: 'rgba(19, 21, 54, 0.98)'
      secondary-text-color: 'rgba(19, 21, 54, 0.8)'
      text-primary-color: 'rgba(19, 21, 54, 0.98)'
      disabled-text-color: 'rgba(19, 21, 54, 0.45)'
      text-light-primary-color: 'rgb(28, 29, 33)'
      paper-item-icon-color: 'rgba(19, 21, 54, 0.95)'
      state-inactive-color: 'rgba(19, 21, 54, 0.8)'
      state-icon-color: 'rgba(19, 21, 54, 0.95)'
      state-on-color: 'rgb(118, 214, 152)'
      state-off-color: 'rgb(234, 114, 135)'
      label-badge-text-color: 'rgba(19, 21, 54, 0.85)'
      label-badge-red: 'rgb(234, 114, 135)'
      label-badge-blue: 'rgb(106, 116, 211)'
      label-badge-green: 'rgb(78, 183, 128)'
      label-badge-yellow: 'rgb(255, 219, 117)'
      label-badge-grey: 'rgb(83, 90, 103)'
      ha-chip-text-color: 'rgb(0, 0, 0)'

      primary-color: 'rgb(106, 116, 211)'
      dark-primary-color: 'rgb(106, 116, 211)'
      light-primary-color: 'rgb(167, 182, 199)'
      accent-color: 'rgb(106, 116, 211)'
      divider-color: 'rgba(224, 224, 224, 0.3)'
      scrollbar-thumb-color: 'rgb(180, 180, 180)'
      disabled-color: 'rgb(173, 176, 184)'
      info-color: 'rgb(106, 116, 211)'
      success-color: 'rgb(118, 214, 152)'
      warning-color: 'rgb(255, 219, 117)'
      error-color: 'rgb(234, 114, 135)'
      background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/wessamlauf/homeassistant-frosted-glass-themes@refs/heads/main/themes/frosted-glass-light-background.jpg')"
      lovelace-background: var(--background-image)
      primary-background-color: 'rgba(254, 244, 242, 1)'
      secondary-background-color: 'rgba(245, 245, 245, 0.5)'
      clear-background-color: 'rgba(254, 244, 242, 0.9)'
      card-background-color: 'rgba(254, 244, 242, 0.9)'
      ha-card-background: 'rgba(254, 244, 242, 0.9)'
      ha-card-border-radius: '18px'
      ha-card-border-color: 'rgba(255, 255, 255, 0.3)'
      ha-card-border-width: '0.5px'
      ha-card-border-style: 'solid'
      ha-card-border: '0.5px solid rgba(255, 255, 255, 0.3)'
      ha-card-box-shadow: '0 12px 20px rgba(0, 0, 0, 0.15)'
      ha-view-sections-column-gap: '17px'
      ha-view-sections-column-min-width: 320px

      # Sliders, toggles, switches
      paper-slider-knob-color: 'rgb(106, 116, 211)'
      paper-slider-knob-start-color: 'rgb(106, 116, 211)'
      paper-slider-pin-color: 'rgb(106, 116, 211)'
      paper-slider-active-color: 'rgb(106, 116, 211)'
      paper-slider-secondary-color: 'rgb(167, 182, 199)'
      switch-checked-button-color: 'rgb(106, 116, 211)'
      switch-checked-track-color: 'rgb(106, 116, 211)'
      switch-unchecked-button-color: 'rgba(0, 0, 0, 0.6)'
      switch-unchecked-track-color: 'rgba(0, 0, 0, 0.3)'
      paper-toggle-button-checked-button-color: 'rgb(106, 116, 211)'
      paper-toggle-button-checked-bar-color: 'rgb(106, 116, 211)'
      paper-toggle-button-unchecked-button-color: 'rgba(0, 0, 0, 0.6)'
      paper-toggle-button-unchecked-bar-color: 'rgba(0, 0, 0, 0.3)'
      mdc-checkbox-unchecked-color: 'rgba(19, 21, 54, 0.75)'
      mdc-radio-unchecked-color: 'rgba(19, 21, 54, 0.75)'
      mdc-ripple-hover-opacity: '0.1'

      # Inputs
      input-background-color: 'rgba(254, 255, 252, 0.8)'
      input-background-token-color-disabled: 'rgba(254, 255, 252, 0.8)'
      input-fill-color: 'rgba(255, 255, 252, 0.8)'
      input-ink-color: 'rgba(19, 21, 54, 0.98)'
      input-label-ink-color: 'rgba(19, 21, 54, 0.98)'
      input-disabled-fill-color: 'rgba(245, 245, 245, 0.6)'
      input-disabled-ink-color: 'rgba(19, 21, 54, 0.45)'
      input-disabled-label-ink-color: 'rgba(19, 21, 54, 0.45)'
      input-idle-line-color: 'transparent'
      input-dropdown-icon-color: 'rgba(19, 21, 54, 0.8)'
      input-hover-line-color: 'rgb(106, 116, 211)'
      mdc-select-idle-line-color: 'transparent'
      mdc-text-field-idle-line-color: 'transparent'

      # Code Editor & Misc
      code-editor-background-color: 'rgba(234, 235, 238, 1)'
      codemirror-meta: 'rgba(19, 21, 54, 0.98)'
      codemirror-property: 'rgb(106, 116, 211)'
      codemirror-atom: 'rgb(106, 116, 211)'
      codemirror-string: 'rgb(0, 77, 153)'
      codemirror-keyword: 'rgb(70, 112, 216)'
      codemirror-number: 'rgb(204, 85, 0)'
      mcg-title-font-weight: '400'
      mush-title-font-weight: '500'
      mush-title-font-size: 'var(--token-size-font-2xl)'
      light-grey-color: 'rgb(103, 104, 119)'
      mush-rgb-grey: '103, 104, 119)'

      # Misc sizes
      paper-slider-height: '5px'
      border-radius: '18px'

    dark:
      card-mod-theme: 'Frosted Glass Dark'

      # =========================
      # HEADER (Top Bar)
      # =========================
      app-header-backdrop-filter: 'blur(8px) saturate(1.1)'
      app-header-background-color: 'rgba(30, 30, 30, 0.01)'
      app-header-text-color: 'rgba(240, 243, 255, 0.95)'
      app-header-edit-background-color: 'rgba(30, 33, 54, 0.8)'
      app-header-edit-text-color: 'rgba(234, 235, 238, 0.98)'
      app-theme-color: 'rgb(0, 0, 0)'

      # =========================
      # SIDEBAR / DRAWER
      # =========================
      sidebar-background-color: 'rgba(30, 30, 30, 0.8)'
      sidebar-icon-color: 'rgba(234, 235, 238, 0.6)'
      sidebar-text-color: 'rgba(234, 235, 238, 0.8)'
      sidebar-selected-icon-color: 'rgba(234, 235, 238, 0.95)'
      sidebar-selected-text-color: 'rgba(234, 235, 238, 0.98)'

      # =========================
      # DIALOGS
      # =========================
      ha-dialog-surface-backdrop-filter: 'blur(8px)'
      ha-dialog-surface-background: 'rgba(30, 30, 30, 0.7)'
      dialog-box-shadow: '0 12px 20px rgba(0, 0, 0, 0.25)'
      paper-dialog-background-color: 'rgba(30, 30, 30, 0.7)'
      mdc-dialog-scrim-color: 'rgba(0, 0, 0, 0.8)'

      # =========================
      # CARDS / CARD-MOD
      # =========================
      card-mod-card: |
        /* Base reset */
        ha-card {
          background: transparent;
          backdrop-filter: none;
          -webkit-backdrop-filter: none;
        }

        /* Glass layer (variable-driven, matches Light) */
        ha-card::before {
          content: '';
          position: absolute;
          inset: 0;
          background: var(--ha-card-glass-tint, rgba(28, 29, 33, 0.18));
          backdrop-filter: var(--ha-card-backdrop-filter, blur(10px) saturate(1.2));
          -webkit-backdrop-filter: var(--ha-card-backdrop-filter, blur(10px) saturate(1.2));
          z-index: -1;
          pointer-events: none;
          border-radius: inherit;
          box-shadow: var(--ha-card-glass-inset-shadow,
            3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.22) inset,
            -2px -2px 0.5px -2px rgba(255, 255, 255, 0.18) inset,
            0 0 8px 1px rgba(255, 255, 255, 0.06) inset,
            0 0 2px 0 rgba(0, 0, 0, 0.18)
          );
        }

        /* Headings + Glance */
        :host(hui-heading-card) ha-card,
        :host(hui-glance-card) ha-card {
          background: none !important;
          backdrop-filter: none !important;
          -webkit-backdrop-filter: none !important;
        }
        :host(hui-heading-card) ha-card::before,
        :host(hui-glance-card) ha-card::before {
          content: none !important;
        }

        /* Data tables */
        .mdc-data-table {
          background: none !important;
        }
        .mdc-data-table__header-cell {
          background: rgba(30, 33, 54, 0.18) !important;
          backdrop-filter: var(--ha-card-backdrop-filter) !important;
          -webkit-backdrop-filter: var(--ha-card-backdrop-filter) !important;
          box-shadow: var(--ha-card-glass-inset-shadow) !important;
        }

        /* Markdown card with text_only */
        :host(.text-only) ha-card,
        :host(.text-only) ha-card::before,
        ha-card.text-only,
        ha-card.text-only::before {
          background: none !important;
          backdrop-filter: none !important;
          -webkit-backdrop-filter: none !important;
          box-shadow: none !important;
          content: none !important;
        }

        /* Mushroom title card */
        :host(mushroom-title-card) ha-card {
          background: none !important;
          backdrop-filter: none !important;
          -webkit-backdrop-filter: none !important;
          box-shadow: none !important;
        }
        :host(mushroom-title-card) ha-card::before {
          content: none !important;
        }

        /* Bubble cards */
        :host(.type-custom-bubble-card) ha-card {
          background: none !important;
          backdrop-filter: none !important;
          -webkit-backdrop-filter: none !important;
          box-shadow: none !important;
          border-radius: 0px !important;
        }
        :host(.type-custom-bubble-card) ha-card::before {
          content: none !important;
          background: none !important;
          backdrop-filter: none !important;
          -webkit-backdrop-filter: none !important;
        }

        /* Mushroom chips */
        :host(mushroom-chips-card) ha-card {
          background: none !important;
          backdrop-filter: none !important;
          -webkit-backdrop-filter: none !important;
          box-shadow: none !important;
        }
        :host(mushroom-chips-card) ha-card::before {
          content: none !important;
          background: none !important;
          backdrop-filter: none !important;
          -webkit-backdrop-filter: none !important;
        }

      # =========================
      # CARD-MOD-ROOT GLOBAL CSS
      # =========================
      card-mod-root: |
        :host {
          --ha-card-background: rgba(30, 30, 30, 0.1);
          --ha-card-box-shadow: 0 12px 20px rgba(0, 0, 0, 0.28);
          --ha-card-border-width: 0.5px;
          --ha-card-border-color: rgba(234, 235, 238, 0.1);
          --ha-card-backdrop-filter: blur(10px) saturate(1.2);

          /* Glass system tokens */
          --ha-card-glass-tint: rgba(28, 29, 33, 0.18);
          --ha-card-glass-inset-shadow:
            3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.15) inset,
            -2px -2px 0.5px -2px rgba(255, 255, 255, 0.1) inset,
            0 0 8px 1px rgba(255, 255, 255, 0.06) inset,
            0 0 2px 0 rgba(0, 0, 0, 0.18);

          /* Tokens - match structure to Light theme */
          --token-rgb-primary: 106, 116, 211;
          --token-rgb-black: 0, 0, 0;
          --token-rgb-white: 234, 235, 238;
          --token-rgb-purple: 129, 45, 250;
          --token-rgb-pink: 204, 0, 136;
          --token-rgb-red: 204, 0, 51;
          --token-rgb-deep-purple: 98, 0, 234;
          --token-rgb-indigo: 48, 63, 159;
          --token-rgb-blue: 33, 150, 243;
          --token-rgb-light-blue: 3, 169, 244;
          --token-rgb-cyan: 106, 116, 211;
          --token-rgb-teal: 106, 116, 211;
          --token-rgb-green: 56, 142, 60;
          --token-rgb-light-green: 139, 195, 74;
          --token-rgb-lime: 205, 220, 57;
          --token-rgb-yellow: 250, 183, 0;
          --token-rgb-amber: 255, 193, 7;
          --token-rgb-orange: 255, 158, 0;
          --token-rgb-deep-orange: 255, 87, 34;
          --token-rgb-brown: 121, 85, 72;
          --token-rgb-grey: 103, 104, 119;
          --token-rgb-blue-grey: 96, 125, 139;
          --token-rgb-disabled: 189, 189, 189;
          --token-rgb-state-inactive: 176, 190, 197;

          --token-color-primary: rgb(var(--token-rgb-primary));
          --token-color-primary-light: rgb(167 182 199);
          --token-color-accent: rgb(var(--token-rgb-teal));
          --token-color-disabled: rgb(173 176 184);
          --token-color-feedback-info: rgb(106, 116, 211);
          --token-color-feedback-warning: rgb(255, 219, 117);
          --token-color-feedback-error: rgb(234, 114, 135);
          --token-color-feedback-success: rgb(118, 214, 152);
          --token-color-icon-primary: rgba(234, 235, 238, 0.95);
          --token-color-icon-secondary: rgba(234, 235, 238, 0.75);
          --token-color-icon-sidebar: rgba(234, 235, 238, 0.6);
          --token-color-icon-sidebar-selected: var(--token-color-icon-primary);
          --token-color-text-primary: rgba(234, 235, 238, 0.98);
          --token-color-text-secondary: rgba(234, 235, 238, 0.8);
          --token-color-text-disabled: rgba(234, 235, 238, 0.45);
          --token-color-text-sidebar-selected: var(--token-color-text-primary);
          --token-color-text-sidebar: var(--token-color-text-secondary);
          --token-color-text-label-badge: rgba(234, 235, 238, 0.85);
          --token-color-text-chip: rgb(var(--token-rgb-white));
          --token-color-background-base: rgba(25, 28, 45, 0.8);
          --token-color-background-secondary: rgba(30, 33, 54, 0.7);
          --token-color-background-sidebar: var(--token-color-background-base);
          --token-color-background-input-base: rgba(30, 33, 54, 0.7);
          --token-color-background-input-disabled: rgba(30, 33, 54, 0.5);
          --token-color-background-label-badge: rgb(60, 60, 78);
          --token-color-background-card: rgba(28, 29, 33, 0.85);
          --token-color-background-skrim: rgba(0, 0, 0, 0.7);
          --token-color-background-divider: rgba(84, 84, 98, 0.28);
          --token-color-background-scrollbar-thumb: rgb(68, 68, 88);
          --token-color-background-label-badge-red: var(--token-color-feedback-error);
          --token-color-background-label-badge-blue: var(--token-color-feedback-info);
          --token-color-background-label-badge-green: rgb(78, 183, 128);
          --token-color-background-label-badge-yellow: var(--token-color-feedback-warning);
          --token-color-background-label-badge-grey: rgb(83, 90, 103);
          --token-color-background-popup-scrim: rgba(0, 0, 0, 1);
          --token-color-border-card: rgba(234, 235, 238, 0.22);
          --token-color-switch-button-unchecked: rgba(234, 235, 238, 0.3);
          --token-color-switch-track-unchecked: rgba(234, 235, 238, 0.18);
          --token-color-codemirror-string: rgb(164, 209, 255);
          --token-color-codemirror-keyword: rgb(148, 182, 255);
          --token-color-codemirror-number: rgb(255, 171, 64);
          --token-shadow-card-medium: 0 12px 20px rgba(0, 0, 0, 0.28);
          --token-size-radius-small: 10px;
          --token-size-radius-medium: 14px;
          --token-size-radius-large: 18px;
          --token-size-radius-card: var(--token-size-radius-large);
          --token-size-width-border-card: 0.5px;
          --token-size-height-slider: 5px;
          --token-size-height-navbar: 60px;
          --token-size-font-xs: calc(10px * var(--ha-font-size-scale));
          --token-size-font-s: calc(12px * var(--ha-font-size-scale));
          --token-size-font-m: calc(14px * var(--ha-font-size-scale));
          --token-size-font-l: calc(15px * var(--ha-font-size-scale));
          --token-size-font-xl: calc(20px * var(--ha-font-size-scale));
          --token-size-font-2xl: calc(25px * var(--ha-font-size-scale));
          --token-size-font-3xl: calc(29px * var(--ha-font-size-scale));
          --token-size-font-4xl: calc(33px * var(--ha-font-size-scale));
          --token-size-font-5xl: calc(42px * var(--ha-font-size-scale));
          --token-size-spacing-medium: 17px;
          --token-size-section-min-width: 320px;
          --token-color-transparent: rgba(0, 0, 0, 0);
          --token-color-black: rgb(0, 0, 0);
          --token-color-white: rgb(234, 235, 238);
          --token-opacity-ripple-hover: 0.1;
          --token-font-family-primary: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
          --token-weight-font-title-card: 500;
          
          # Additional color variables
          --token-color-red: rgb(var(--token-rgb-red));
          --token-color-green: rgb(var(--token-rgb-green));
          --token-color-blue: rgb(var(--token-rgb-blue));
          --token-color-yellow: rgb(var(--token-rgb-yellow));
          --token-color-orange: rgb(var(--token-rgb-orange));
          --token-color-purple: rgb(var(--token-rgb-purple));
          --token-color-pink: rgb(var(--token-rgb-pink));
          --token-color-amber: rgb(var(--token-rgb-amber));
          --token-color-cyan: rgb(var(--token-rgb-cyan));
          --token-color-teal: rgb(var(--token-rgb-teal));
          --token-color-lime: rgb(var(--token-rgb-lime));
          --token-color-light-green: rgb(var(--token-rgb-light-green));
          --token-color-deep-orange: rgb(var(--token-rgb-deep-orange));
          --token-color-brown: rgb(var(--token-rgb-brown));
          --token-color-grey: rgb(var(--token-rgb-grey));
          --token-color-blue-grey: rgb(var(--token-rgb-blue-grey));
          --token-color-indigo: rgb(var(--token-rgb-indigo));
          --token-color-deep-purple: rgb(var(--token-rgb-deep-purple));
          --token-color-light-blue: rgb(var(--token-rgb-light-blue));
        }

        /* SIDEBAR BLUR */
        .mdc-drawer .mdc-drawer__content {
          backdrop-filter: blur(8px) saturate(1.1) !important;
          -webkit-backdrop-filter: blur(8px) saturate(1.1) !important;
          background: rgba(25, 28, 45, 0.8) !important;
          box-shadow: var(--ha-card-glass-inset-shadow) !important;
        }

        /* CARDS RADIUS */
        ha-card {
          border-radius: var(--token-size-radius-large);
          border: var(--ha-card-border, var(--ha-card-border-width) solid var(--ha-card-border-color));
          box-shadow: var(--ha-card-box-shadow);
        }
        ha-card ha-card {
          --ha-card-border-width: 0px;
        }

        /* DRAWER SCRIM */
        ha-drawer {
          --mdc-drawer-scrim-color: rgba(0, 0, 0, 0.8) !important;
        }

        /* LABEL BADGE */
        ha-label-badge {
          --label-badge-background-color: rgba(60, 60, 78, 0.28) !important;
          backdrop-filter: blur(10px) saturate(1.1) !important;
          -webkit-backdrop-filter: blur(10px) saturate(1.1) !important;
          --label-badge-text-color: rgba(234, 235, 238, 0.9) !important;
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.10) !important;
          border: 0.5px solid rgba(234, 235, 238, 0.22) !important;
        }

        /* INPUTS */
        input, ha-textfield, ha-select {
          background: rgba(30, 33, 54, 0.7) !important;
          backdrop-filter: blur(6px) !important;
          -webkit-backdrop-filter: blur(6px);
          border-radius: var(--token-size-radius-small);
          border: none !important;
          box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.09) !important;
        }

        /* Custom text divider row size fix */
        custom-text-divider-row .text-divider-content {
          background: #181929 !important;
          opacity: 1 !important;
          box-shadow: none !important;
          border-radius: 10px !important;
          padding: 0 8px !important;
          --text-divider-font-size: 16px !important;
          --text-divider-line-size: 1px;
          --text-divider-color: rgba(234, 235, 238, 1) !important;
        }

      # =========================
      # TYPOGRAPHY
      # =========================
      ha-font-family-body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      ha-font-family-heading: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      ha-font-family-code: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      ha-font-family-longform: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      ha-card-header-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      mdc-typography-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      mdc-typography-button-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      mdc-typography-body1-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      md-list-item-label-text-font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      paper-font-common-base_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      paper-font-common-code_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      paper-font-body1_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      paper-font-subhead_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      paper-font-headline_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      paper-font-caption_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      paper-font-title_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'

      ha-font-weight-normal: '400'
      ha-font-weight-medium: '500'
      ha-font-weight-bold: '700'
      ha-font-weight-body: '400'
      ha-font-weight-heading: '500'
      ha-font-weight-action: '500'
      mdc-typography-button-font-weight: '500'
      title-font-weight: 'var(--token-weight-font-title-card)'

      ha-font-size-xs: '10px'
      ha-font-size-s: '12px'
      ha-font-size-m: '14px'
      ha-font-size-l: '15px'
      ha-font-size-xl: '20px'
      ha-font-size-2xl: '25px'
      ha-font-size-3xl: '29px'
      ha-font-size-4xl: '33px'
      ha-font-size-5xl: '42px'
      title-font-size: '20px'
      ha-heading-card-title-font-size: 'var(--token-size-font-l)'
      ha-heading-card-title-font-weight: '500'
      ha-font-smoothing: 'antialiased'

      # =========================
      # COLORS & MISCELLANEOUS
      # =========================
      # 1.2.1 - change add HA 2025.8 primary color scale aligned to theme
      ha-color-primary-05: '#0D0E19'
      ha-color-primary-10: '#131526'
      ha-color-primary-20: '#20233F'
      ha-color-primary-30: '#30345F'
      ha-color-primary-40: '#40467F'
      ha-color-primary-50: '#6A74D3'   # base theme primary (kept)
      ha-color-primary-60: '#8F97DE'
      ha-color-primary-70: '#ADB3E7'
      ha-color-primary-80: '#D2D5F2'
      ha-color-primary-90: '#EAECF9'
      ha-color-primary-95: '#F6F7FC'

      # 1.2.1 - change add aliases for compatibility (some threads reference --color-primary-xx)
      color-primary-05: '#0D0E19'
      color-primary-10: '#131526'
      color-primary-20: '#20233F'
      color-primary-30: '#30345F'
      color-primary-40: '#40467F'
      color-primary-50: '#6A74D3'
      color-primary-60: '#8F97DE'
      color-primary-70: '#ADB3E7'
      color-primary-80: '#D2D5F2'
      color-primary-90: '#EAECF9'
      color-primary-95: '#F6F7FC'
      primary-text-color: 'rgba(234, 235, 238, 0.98)'
      secondary-text-color: 'rgba(234, 235, 238, 0.8)'
      text-primary-color: 'rgba(234, 235, 238, 0.98)'
      disabled-text-color: 'rgba(234, 235, 238, 0.45)'
      text-light-primary-color: 'rgb(234, 235, 238)'
      paper-item-icon-color: 'rgba(234, 235, 238, 0.95)'
      state-inactive-color: 'rgba(234, 235, 238, 0.8)'
      state-icon-color: 'rgba(234, 235, 238, 0.95)'
      state-on-color: 'rgb(118, 214, 152)'
      state-off-color: 'rgb(234, 114, 135)'
      label-badge-text-color: 'rgba(234, 235, 238, 0.85)'
      label-badge-red: 'rgb(234, 114, 135)'
      label-badge-blue: 'rgb(106, 116, 211)'
      label-badge-green: 'rgb(78, 183, 128)'
      label-badge-yellow: 'rgb(255, 219, 117)'
      label-badge-grey: 'rgb(83, 90, 103)'
      ha-chip-text-color: 'rgb(234, 235, 238)'

      primary-color: 'rgb(106, 116, 211)'
      dark-primary-color: 'rgb(106, 116, 211)'
      light-primary-color: 'rgb(167, 182, 199)'
      accent-color: 'rgb(106, 116, 211)'
      divider-color: 'rgba(84, 84, 98, 0.28)'
      scrollbar-thumb-color: 'rgb(68, 68, 88)'
      disabled-color: 'rgb(173, 176, 184)'
      info-color: 'rgb(106, 116, 211)'
      success-color: 'rgb(118, 214, 152)'
      warning-color: 'rgb(255, 219, 117)'
      error-color: 'rgb(234, 114, 135)'
      background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/wessamlauf/homeassistant-frosted-glass-themes@refs/heads/main/themes/frosted-glass-dark-background.jpg')"
      lovelace-background: 'var(--background-image)'
      primary-background-color: 'rgba(30, 30, 30, 1)'                                                        # 1.2 change - improved background color for a darker feel 
      secondary-background-color: 'rgba(30, 33, 54, 0.6)'
      clear-background-color: 'rgba(30, 33, 54, 0.7)'
      card-background-color: 'rgba(30, 30, 30, 0.85)'
      ha-card-background: 'rgba(30, 30, 30, 0.9)'
      ha-card-border-radius: '18px'
      ha-card-border-color: 'rgba(234, 235, 238, 0.22)'
      ha-card-border-width: '0.5px'
      ha-card-border-style: 'solid'
      ha-card-border: '0.5px solid rgba(234, 235, 238, 0.1)'
      ha-card-box-shadow: '0 12px 20px rgba(0, 0, 0, 0.28)'
      ha-view-sections-column-gap: '17px'
      ha-view-sections-column-min-width: 320px

      # Sliders, toggles, switches
      paper-slider-knob-color: 'rgb(106, 116, 211)'
      paper-slider-knob-start-color: 'rgb(106, 116, 211)'
      paper-slider-pin-color: 'rgb(106, 116, 211)'
      paper-slider-active-color: 'rgb(106, 116, 211)'
      paper-slider-secondary-color: 'rgb(167, 182, 199)'
      switch-checked-button-color: 'rgb(106, 116, 211)'
      switch-checked-track-color: 'rgb(106, 116, 211)'
      switch-unchecked-button-color: 'rgba(234, 235, 238, 0.3)'
      switch-unchecked-track-color: 'rgba(234, 235, 238, 0.18)'
      paper-toggle-button-checked-button-color: 'rgb(106, 116, 211)'
      paper-toggle-button-checked-bar-color: 'rgb(106, 116, 211)'
      paper-toggle-button-unchecked-button-color: 'rgba(234, 235, 238, 0.3)'
      paper-toggle-button-unchecked-bar-color: 'rgba(234, 235, 238, 0.18)'
      mdc-checkbox-unchecked-color: 'rgba(234, 235, 238, 0.75)'
      mdc-radio-unchecked-color: 'rgba(234, 235, 238, 0.75)'
      mdc-ripple-hover-opacity: '0.1'

      # Inputs
      input-background-color: 'rgba(50, 50, 50, 0.1)'
      input-background-token-color-disabled: 'rgba(50, 50, 50, 0.1)'
      input-fill-color: 'rgba(50,50, 50, 0.1)'
      input-ink-color: 'rgba(234, 235, 238, 0.98)'
      input-label-ink-color: 'rgba(234, 235, 238, 0.98)'
      input-disabled-fill-color: 'rgba(30, 33, 54, 0.5)'
      input-disabled-ink-color: 'rgba(234, 235, 238, 0.45)'
      input-disabled-label-ink-color: 'rgba(234, 235, 238, 0.45)'
      input-idle-line-color: 'transparent'
      input-dropdown-icon-color: 'rgba(234, 235, 238, 0.8)'
      input-hover-line-color: 'rgb(106, 116, 211)'
      mdc-select-idle-line-color: 'transparent'
      mdc-text-field-idle-line-color: 'transparent'

      # Code Editor & Misc
      code-editor-background-color: 'rgba(25, 28, 45, 1)'
      codemirror-meta: 'rgba(234, 235, 238, 0.98)'
      codemirror-property: 'rgb(106, 116, 211)'
      codemirror-atom: 'rgb(106, 116, 211)'
      codemirror-string: 'rgb(164, 209, 255)'
      codemirror-keyword: 'rgb(148, 182, 255)'
      codemirror-number: 'rgb(255, 171, 64)'
      mcg-title-font-weight: '400'
      mush-title-font-weight: '500'
      mush-title-font-size: 'var(--token-size-font-2xl)'
      light-grey-color: 'rgb(103, 104, 119)'
      mush-rgb-grey: '103, 104, 119'

      # Misc sizes
      paper-slider-height: '5px'
      border-radius: '18px'

      # --- End of Theme ---"""


# ==============================================================================
# LITE THEME TEMPLATE
# ==============================================================================
LITE_THEME_TEMPLATE = """# Frosted Glass Lite
# ver. 1.2.2 - (2025-11-22)

# Frosted Glass Custom Lite
# ver. 1.2.2 - (2025-11-22)  

Frosted Glass Custom Lite:
  modes:
    light:
      card-mod-theme: "Frosted Glass Light Lite"

      # =========================
      # HEADER (Top Bar)
      # =========================
      app-header-background-color: 'rgba(234, 235, 238, 0.1)'
      app-header-text-color: 'rgba(19, 21, 54, 0.95)'
      app-header-edit-background-color: 'rgba(255, 255, 255, 0.8)'
      app-header-edit-text-color: 'rgba(19, 21, 54, 0.98)'
      app-theme-color: 'rgb(91, 138, 168)'                                                                   # 1.2 Glass – header theme color hint for browsers

      # =========================
      # SIDEBAR / DRAWER
      # =========================
      sidebar-background-color: 'rgba(254, 244, 242, 0.7)'
      sidebar-icon-color: 'rgba(19, 21, 54, 0.6)'
      sidebar-text-color: 'rgba(19, 21, 54, 0.8)'
      sidebar-selected-icon-color: 'rgba(19, 21, 54, 0.95)'
      sidebar-selected-text-color: 'rgba(19, 21, 54, 0.98)'

      # Sidebar blur (card-mod-root section at end handles blur effect!)

      # =========================
      # DIALOGS
      # =========================
      ha-dialog-surface-background: 'rgba(234, 235, 238, 0.9)'
      dialog-box-shadow: '0 12px 20px rgba(0, 0, 0, 0.15)'                                                     # 1.2 Glass – fix: remove stray quotes inside rgba
      paper-dialog-background-color: 'rgba(234, 235, 238, 0.9)'
      mdc-dialog-scrim-color: 'rgba(0, 0, 0, 0.9)'

      # =========================
      # CARDS / CARD-MOD
      # =========================
      card-mod-card: |
        /* Base reset */
        ha-card {
          background: transparent;
        }

        /* Glass layer */
        ha-card::before {                                                                                      /* 1.2 Glass – glass overlay */
          content: '';
          position: absolute;
          inset: 0;
          background: var(--ha-card-glass-tint, rgba(255, 255, 255, 0.08));                                    /* 1.2 Glass – subtle tint */
          z-index: -1;
          pointer-events: none;
          border-radius: inherit;
          box-shadow: var(--ha-card-glass-inset-shadow,                                                         /* 1.2 Glass – inner bevel/glow */
            3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.30) inset,
            -2px -2px 0.5px -2px rgba(255, 255, 255, 0.30) inset,
            0 0 8px 1px rgba(255, 255, 255, 0.10) inset,
            0 0 2px 0 rgba(0, 0, 0, 0.10)
          );
        }

        /* Headings + Glance (kept as your exclusions) */
        :host(hui-heading-card) ha-card,
        :host(hui-glance-card) ha-card {
          background: none !important;
        }
        :host(hui-heading-card) ha-card::before,
        :host(hui-glance-card) ha-card::before {
          content: none !important;
        }

        /* IMPORTANT: Allow normal Markdown cards to be glassy; only exclude text-only variant */
        /* (Fix) Removed global :host(hui-markdown-card) exclusion you had before                     # 1.2 Glass – bugfix
           so standard Markdown gets the glass. The text-only variant remains excluded below. */

        /* Data tables */
        .mdc-data-table {
          background: none !important;
        }
        .mdc-data-table__header-cell {
          background: rgba(255, 255, 255, 0.1) !important;
          box-shadow: var(--ha-card-glass-inset-shadow) !important;                                           /* 1.2 Glass – consistent bevel */
        }

        /* Markdown card with text_only → no background or blur */                        # 1.1.9 Change - text only markdown and mushroom title card no background // Beginning
        :host(.text-only) ha-card,
        :host(.text-only) ha-card::before,
        ha-card.text-only,
        ha-card.text-only::before {                                                                           /* 1.2 Glass – add ha-card.text-only for compatibility */
          background: none !important;
          box-shadow: none !important;
          content: none !important;
        }

        /* Mushroom title card (no background or blur) */
        :host(mushroom-title-card) ha-card {
          background: none !important;
          box-shadow: none !important;                                                                         /* 1.2 Glass – ensure no bevel */
        }
        :host(mushroom-title-card) ha-card::before {
          content: none !important;
        }

        /* === Prevent frosted glass from applying to bubble cards ===               # 1.2 Change - Bubble cards are no longer applied */
        :host(.type-custom-bubble-card) ha-card {
          background: none !important;
          box-shadow: none !important;
          border-radius: 0px !important;
        }
        :host(.type-custom-bubble-card) ha-card::before {
          content: none !important;
          background: none !important;
        }

        /* === Prevent frosted glass from applying to mushroom-chips-card outer container ===      # 1.2 Change - Outer mushroom chips no longer applied  */
        :host(mushroom-chips-card) ha-card {
          background: none !important;
          box-shadow: none !important;
        }
        :host(mushroom-chips-card) ha-card::before {
          content: none !important;
          background: none !important;
        }

      # =========================
      # CARD-MOD-ROOT GLOBAL CSS
      # =========================
      card-mod-root: |
       :host {
        --ha-card-background: rgba(242, 245, 255, 0.1);
        --ha-card-box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
        --ha-card-border-width: 0.5px;
        --ha-card-border-color: rgba(255, 255, 255, 0.3);                                                # 1.1.9 change - added blur & saturation for badges

        /* Glass system tokens (new) */
        --ha-card-glass-tint: rgba(255, 255, 255, 0.08);                                                      # 1.2 Glass – global tint layer
        --ha-card-glass-inset-shadow:                                                                         # 1.2 Glass – inner bevel/glow (Liquid Glass inspired)
          3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.30) inset,
          -2px -2px 0.5px -2px rgba(255, 255, 255, 0.30) inset,
          0 0 8px 1px rgba(255, 255, 255, 0.10) inset,
          0 0 2px 0 rgba(0, 0, 0, 0.10);
       }

       /* Custom text divider row size fix */
       custom-text-divider-row .text-divider-content {
        background: #fff !important; /* or your color */
        opacity: 1 !important;
        box-shadow: none !important;
        border-radius: 10px !important; /* adjust as needed */
        padding: 0 8px !important;
        --text-divider-font-size: 16px !important;
        --text-divider-line-size: 1px;
        --text-divider-color: rgba(19, 21, 54, 1) !important;
       }

        
          # Tokens (used throughout cards/UI)
          --token-rgb-primary: 106, 116, 211;
          --token-rgb-black: 0, 0, 0;
          --token-rgb-white: 240, 243, 255;
          --token-rgb-purple: 129, 45, 250;
          --token-rgb-pink: 204, 0, 136;
          --token-rgb-red: 204, 0, 51;
          --token-rgb-deep-purple: 98, 0, 234;
          --token-rgb-indigo: 48, 63, 159;
          --token-rgb-blue: 33, 150, 243;
          --token-rgb-light-blue: 3, 169, 244;
          --token-rgb-cyan: 106, 116, 211;
          --token-rgb-teal: 106, 116, 211;
          --token-rgb-green: 56, 142, 60;
          --token-rgb-light-green: 139, 195, 74;
          --token-rgb-lime: 205, 220, 57;
          --token-rgb-yellow: 250, 183, 0;
          --token-rgb-amber: 255, 193, 7;
          --token-rgb-orange: 255, 158, 0;
          --token-rgb-deep-orange: 255, 87, 34;
          --token-rgb-brown: 121, 85, 72;
          --token-rgb-grey: 103, 104, 119;
          --token-rgb-blue-grey: 96, 125, 139;
          --token-rgb-disabled: 189, 189, 189;
          --token-rgb-state-inactive: 176, 190, 197;

          --token-color-primary: rgb(var(--token-rgb-primary));
          --token-color-primary-light: rgb(167 182 199);
          --token-color-accent: rgb(var(--token-rgb-teal));
          --token-color-disabled: rgb(173 176 184);
          --token-color-feedback-info: rgb(106, 116, 211);
          --token-color-feedback-warning: rgb(255, 219, 117);
          --token-color-feedback-error: rgb(234, 114, 135);
          --token-color-feedback-success: rgb(118, 214, 152);
          --token-color-icon-primary: rgba(19, 21, 54, 0.95);
          --token-color-icon-secondary: rgba(19, 21, 54, 0.75);
          --token-color-icon-sidebar: rgba(19, 21, 54, 0.6);
          --token-color-icon-sidebar-selected: var(--token-color-icon-primary);
          --token-color-text-primary: rgba(19, 21, 54, 0.98);
          --token-color-text-secondary: rgba(19, 21, 54, 0.8);
          --token-color-text-disabled: rgba(19, 21, 54, 0.45);
          --token-color-text-sidebar-selected: var(--token-color-text-primary);
          --token-color-text-sidebar: var(--token-color-text-secondary);
          --token-color-text-label-badge: rgba(19, 21, 54, 0.85);
          --token-color-text-chip: rgb(var(--token-rgb-black));
          --token-color-background-base: rgba(234, 235, 238, 0.6);
          --token-color-background-secondary: rgba(245, 245, 245, 0.5);
          --token-color-background-sidebar: var(--token-color-background-base);
          --token-color-background-input-base: rgba(255, 255, 255, 0.7);
          --token-color-background-input-disabled: rgba(245, 245, 245, 0.6);
          --token-color-background-label-badge: rgb(230, 230, 230);
          --token-color-background-card: rgba(255, 255, 255, 0.85);
          --token-color-background-skrim: rgba(0, 0, 0, 0.6);
          --token-color-background-divider: rgba(224, 224, 224, 0.3);
          --token-color-background-scrollbar-thumb: rgb(180, 180, 180);
          --token-color-background-label-badge-red: var(--token-color-feedback-error);
          --token-color-background-label-badge-blue: var(--token-color-feedback-info);
          --token-color-background-label-badge-green: rgb(78, 183, 128);
          --token-color-background-label-badge-yellow: var(--token-color-feedback-warning);
          --token-color-background-label-badge-grey: rgb(83, 90, 103);
          --token-color-background-popup-scrim: rgba(0, 0, 0, 1);
          --token-color-border-card: rgba(255, 255, 255, 0.3);
          --token-color-switch-button-unchecked: rgba(0, 0, 0, 0.6);
          --token-color-switch-track-unchecked: rgba(0, 0, 0, 0.3);
          --token-color-codemirror-string: rgb(0, 77, 153);
          --token-color-codemirror-keyword: rgb(70, 112, 216);
          --token-color-codemirror-number: rgb(204, 85, 0);
          --token-shadow-card-medium: 0 12px 20px rgba(0, 0, 0, 0.15);
          --token-size-radius-small: 10px;
          --token-size-radius-medium: 14px;
          --token-size-radius-large: 18px;
          --token-size-radius-card: var(--token-size-radius-large);
          --token-size-width-border-card: 0.5px;
          --token-size-height-slider: 5px;
          --token-size-height-navbar: 60px;
          --token-size-font-xs: calc(10px * var(--ha-font-size-scale));
          --token-size-font-s: calc(12px * var(--ha-font-size-scale));
          --token-size-font-m: calc(14px * var(--ha-font-size-scale));
          --token-size-font-l: calc(15px * var(--ha-font-size-scale));
          --token-size-font-xl: calc(20px * var(--ha-font-size-scale));
          --token-size-font-2xl: calc(25px * var(--ha-font-size-scale));
          --token-size-font-3xl: calc(29px * var(--ha-font-size-scale));
          --token-size-font-4xl: calc(33px * var(--ha-font-size-scale));
          --token-size-font-5xl: calc(42px * var(--ha-font-size-scale));
          --token-size-spacing-medium: 17px;
          --token-size-section-min-width: 320px;
          --token-color-transparent: rgba(0, 0, 0, 0);
          --token-color-black: rgb(0, 0, 0);
          --token-color-white: rgb(255, 255, 255);
          --token-opacity-ripple-hover: 0.1;
          --token-font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
          --token-weight-font-title-card: 500;

          # Additional color variables
          --token-color-red: rgb(var(--token-rgb-red));
          --token-color-green: rgb(var(--token-rgb-green));
          --token-color-blue: rgb(var(--token-rgb-blue));
          --token-color-yellow: rgb(var(--token-rgb-yellow));
          --token-color-orange: rgb(var(--token-rgb-orange));
          --token-color-purple: rgb(var(--token-rgb-purple));
          --token-color-pink: rgb(var(--token-rgb-pink));
          --token-color-amber: rgb(var(--token-rgb-amber));
          --token-color-cyan: rgb(var(--token-rgb-cyan));
          --token-color-teal: rgb(var(--token-rgb-teal));
          --token-color-lime: rgb(var(--token-rgb-lime));
          --token-color-light-green: rgb(var(--token-rgb-light-green));
          --token-color-deep-orange: rgb(var(--token-rgb-deep-orange));
          --token-color-brown: rgb(var(--token-rgb-brown));
          --token-color-grey: rgb(var(--token-rgb-grey));
          --token-color-blue-grey: rgb(var(--token-rgb-blue-grey));
          --token-color-indigo: rgb(var(--token-rgb-indigo));
          --token-color-deep-purple: rgb(var(--token-rgb-deep-purple));
          --token-color-light-blue: rgb(var(--token-rgb-light-blue));
        }

        /* SIDEBAR BLUR */
        .mdc-drawer .mdc-drawer__content {
          background: rgba(234, 235, 238, 0.7) !important;
          box-shadow: var(--ha-card-glass-inset-shadow) !important;                                          /* 1.2 Glass – subtle inner edge for consistency */
        }

        /* CARDS RADIUS */
        ha-card {
          border-radius: var(--token-size-radius-large);
          border: var(--ha-card-border, var(--ha-card-border-width) solid var(--ha-card-border-color));       /* 1.2 Glass – ensure border follows tokens */
          box-shadow: var(--ha-card-box-shadow);
        }
        ha-card ha-card {
          --ha-card-border-width: 0px;
        }

        /* DRAWER SCRIM */
        ha-drawer {
          --mdc-drawer-scrim-color: rgba(0, 0, 0, 0.6) !important;
        }

        /* LABEL BADGE */
        ha-label-badge {
          --label-badge-background-color: rgba(230, 230, 230, 0.2) !important;
          --label-badge-text-color: rgba(19, 21, 54, 0.9) !important;
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05) !important;
          border: 0.5px solid rgba(255, 255, 255, 0.3) !important;
        }

        /* INPUTS */
        input, ha-textfield, ha-select {
          background: rgba(255, 255, 255, 0.7) !important;
          border-radius: var(--token-size-radius-small);
          border: none !important;
          box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05) !important;
        }

      # =========================
      # TYPOGRAPHY
      # =========================
      ha-font-family-body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      ha-font-family-heading: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      ha-font-family-code: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      ha-font-family-longform: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      ha-card-header-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      mdc-typography-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      mdc-typography-button-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      mdc-typography-body1-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      md-list-item-label-text-font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      paper-font-common-base_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      paper-font-common-code_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      paper-font-body1_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      paper-font-subhead_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      paper-font-headline_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      paper-font-caption_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      paper-font-title_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'

      ha-font-weight-normal: '400'
      ha-font-weight-medium: '500'
      ha-font-weight-bold: '700'
      ha-font-weight-body: '400'
      ha-font-weight-heading: '500'
      ha-font-weight-action: '500'
      mdc-typography-button-font-weight: '500'
      title-font-weight: 'var(--token-weight-font-title-card)'

      ha-font-size-xs: '10px'
      ha-font-size-s: '12px'
      ha-font-size-m: '14px'
      ha-font-size-l: '15px'
      ha-font-size-xl: '20px'
      ha-font-size-2xl: '25px'
      ha-font-size-3xl: '29px'
      ha-font-size-4xl: '33px'
      ha-font-size-5xl: '42px'
      title-font-size: '20px'
      ha-heading-card-title-font-size: 'var(--token-size-font-l)'
      ha-heading-card-title-font-weight: '500'
      ha-font-smoothing: 'antialiased'

      # =========================
      # COLORS & MISCELLANEOUS
      # =========================
      
      # 1.2.1 - change add HA 2025.8 primary color scale aligned to theme
      ha-color-primary-05: '#0D0E19'
      ha-color-primary-10: '#131526'
      ha-color-primary-20: '#20233F'
      ha-color-primary-30: '#30345F'
      ha-color-primary-40: '#40467F'
      ha-color-primary-50: '#6A74D3'   # base theme primary (kept)
      ha-color-primary-60: '#8F97DE'
      ha-color-primary-70: '#ADB3E7'
      ha-color-primary-80: '#D2D5F2'
      ha-color-primary-90: '#EAECF9'
      ha-color-primary-95: '#F6F7FC'

      # 1.2.1 - change add aliases for compatibility (some threads reference --color-primary-xx)
      color-primary-05: '#0D0E19'
      color-primary-10: '#131526'
      color-primary-20: '#20233F'
      color-primary-30: '#30345F'
      color-primary-40: '#40467F'
      color-primary-50: '#6A74D3'
      color-primary-60: '#8F97DE'
      color-primary-70: '#ADB3E7'
      color-primary-80: '#D2D5F2'
      color-primary-90: '#EAECF9'
      color-primary-95: '#F6F7FC'
      
      primary-text-color: 'rgba(19, 21, 54, 0.98)'
      secondary-text-color: 'rgba(19, 21, 54, 0.8)'
      text-primary-color: 'rgba(19, 21, 54, 0.98)'
      disabled-text-color: 'rgba(19, 21, 54, 0.45)'
      text-light-primary-color: 'rgb(28, 29, 33)'
      paper-item-icon-color: 'rgba(19, 21, 54, 0.95)'
      state-inactive-color: 'rgba(19, 21, 54, 0.8)'
      state-icon-color: 'rgba(19, 21, 54, 0.95)'
      state-on-color: 'rgb(118, 214, 152)'
      state-off-color: 'rgb(234, 114, 135)'
      label-badge-text-color: 'rgba(19, 21, 54, 0.85)'
      label-badge-red: 'rgb(234, 114, 135)'
      label-badge-blue: 'rgb(106, 116, 211)'
      label-badge-green: 'rgb(78, 183, 128)'
      label-badge-yellow: 'rgb(255, 219, 117)'
      label-badge-grey: 'rgb(83, 90, 103)'
      ha-chip-text-color: 'rgb(0, 0, 0)'

      primary-color: 'rgb(106, 116, 211)'
      dark-primary-color: 'rgb(106, 116, 211)'
      light-primary-color: 'rgb(167, 182, 199)'
      accent-color: 'rgb(106, 116, 211)'
      divider-color: 'rgba(224, 224, 224, 0.3)'
      scrollbar-thumb-color: 'rgb(180, 180, 180)'
      disabled-color: 'rgb(173, 176, 184)'
      info-color: 'rgb(106, 116, 211)'
      success-color: 'rgb(118, 214, 152)'
      warning-color: 'rgb(255, 219, 117)'
      error-color: 'rgb(234, 114, 135)'
      background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/wessamlauf/homeassistant-frosted-glass-themes@refs/heads/main/themes/frosted-glass-light-background.jpg')"
      lovelace-background: var(--background-image)
      primary-background-color: 'rgba(254, 244, 242, 1)'
      secondary-background-color: 'rgba(245, 245, 245, 0.5)'
      clear-background-color: 'rgba(254, 244, 242, 0.9)'
      card-background-color: 'rgba(254, 244, 242, 0.9)'
      ha-card-background: 'rgba(254, 244, 242, 0.9)'
      ha-card-border-radius: '18px'
      ha-card-border-color: 'rgba(255, 255, 255, 0.3)'
      ha-card-border-width: '0.5px'
      ha-card-border-style: 'solid'
      ha-card-border: '0.5px solid rgba(255, 255, 255, 0.3)'
      ha-card-box-shadow: '0 12px 20px rgba(0, 0, 0, 0.15)'
      ha-view-sections-column-gap: '17px'
      ha-view-sections-column-min-width: 320px

      # Sliders, toggles, switches
      paper-slider-knob-color: 'rgb(106, 116, 211)'
      paper-slider-knob-start-color: 'rgb(106, 116, 211)'
      paper-slider-pin-color: 'rgb(106, 116, 211)'
      paper-slider-active-color: 'rgb(106, 116, 211)'
      paper-slider-secondary-color: 'rgb(167, 182, 199)'
      switch-checked-button-color: 'rgb(106, 116, 211)'
      switch-checked-track-color: 'rgb(106, 116, 211)'
      switch-unchecked-button-color: 'rgba(0, 0, 0, 0.6)'
      switch-unchecked-track-color: 'rgba(0, 0, 0, 0.3)'
      paper-toggle-button-checked-button-color: 'rgb(106, 116, 211)'
      paper-toggle-button-checked-bar-color: 'rgb(106, 116, 211)'
      paper-toggle-button-unchecked-button-color: 'rgba(0, 0, 0, 0.6)'
      paper-toggle-button-unchecked-bar-color: 'rgba(0, 0, 0, 0.3)'
      mdc-checkbox-unchecked-color: 'rgba(19, 21, 54, 0.75)'
      mdc-radio-unchecked-color: 'rgba(19, 21, 54, 0.75)'
      mdc-ripple-hover-opacity: '0.1'

      # Inputs
      input-background-color: 'rgba(254, 255, 252, 0.8)'
      input-background-token-color-disabled: 'rgba(254, 255, 252, 0.8)'
      input-fill-color: 'rgba(255, 255, 252, 0.8)'
      input-ink-color: 'rgba(19, 21, 54, 0.98)'
      input-label-ink-color: 'rgba(19, 21, 54, 0.98)'
      input-disabled-fill-color: 'rgba(245, 245, 245, 0.6)'
      input-disabled-ink-color: 'rgba(19, 21, 54, 0.45)'
      input-disabled-label-ink-color: 'rgba(19, 21, 54, 0.45)'
      input-idle-line-color: 'transparent'
      input-dropdown-icon-color: 'rgba(19, 21, 54, 0.8)'
      input-hover-line-color: 'rgb(106, 116, 211)'
      mdc-select-idle-line-color: 'transparent'
      mdc-text-field-idle-line-color: 'transparent'

      # Code Editor & Misc
      code-editor-background-color: 'rgba(234, 235, 238, 1)'
      codemirror-meta: 'rgba(19, 21, 54, 0.98)'
      codemirror-property: 'rgb(106, 116, 211)'
      codemirror-atom: 'rgb(106, 116, 211)'
      codemirror-string: 'rgb(0, 77, 153)'
      codemirror-keyword: 'rgb(70, 112, 216)'
      codemirror-number: 'rgb(204, 85, 0)'
      mcg-title-font-weight: '400'
      mush-title-font-weight: '500'
      mush-title-font-size: 'var(--token-size-font-2xl)'
      light-grey-color: 'rgb(103, 104, 119)'
      mush-rgb-grey: '103, 104, 119)'

      # Misc sizes
      paper-slider-height: '5px'
      border-radius: '18px'

    dark:
      card-mod-theme: 'Frosted Glass Dark Lite'

      # =========================
      # HEADER (Top Bar)
      # =========================
      app-header-background-color: 'rgba(30, 30, 30, 0.01)'
      app-header-text-color: 'rgba(240, 243, 255, 0.95)'
      app-header-edit-background-color: 'rgba(30, 33, 54, 0.8)'
      app-header-edit-text-color: 'rgba(234, 235, 238, 0.98)'
      app-theme-color: 'rgb(0, 0, 0)'                                                      # 1.2 Glass – header theme color hint for browsers

      # =========================
      # SIDEBAR / DRAWER
      # =========================
      sidebar-background-color: 'rgba(30, 30, 30, 0.8)'
      sidebar-icon-color: 'rgba(234, 235, 238, 0.6)'
      sidebar-text-color: 'rgba(234, 235, 238, 0.8)'
      sidebar-selected-icon-color: 'rgba(234, 235, 238, 0.95)'
      sidebar-selected-text-color: 'rgba(234, 235, 238, 0.98)'

      # =========================
      # DIALOGS
      # =========================
      ha-dialog-surface-background: 'rgba(30, 30, 30, 0.9)'
      dialog-box-shadow: '0 12px 20px rgba(0, 0, 0, 0.25)'
      paper-dialog-background-color: 'rgba(30, 30, 30, 0.9)'
      mdc-dialog-scrim-color: 'rgba(0, 0, 0, 0.9)'

      # =========================
      # CARDS / CARD-MOD
      # =========================
      card-mod-card: |
        /* Base reset */
        ha-card {
          background: transparent;
        }

        /* Glass layer (variable-driven, matches Light) */
        ha-card::before {                                                                   /* 1.2 Glass – glass overlay */
          content: '';
          position: absolute;
          inset: 0;
          background: var(--ha-card-glass-tint, rgba(28, 29, 33, 0.18));                    /* 1.2 Glass – subtle dark tint */
          z-index: -1;
          pointer-events: none;
          border-radius: inherit;
          box-shadow: var(--ha-card-glass-inset-shadow,                                     /* 1.2 Glass – inner bevel/glow */
            3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.22) inset,
            -2px -2px 0.5px -2px rgba(255, 255, 255, 0.18) inset,
            0 0 8px 1px rgba(255, 255, 255, 0.06) inset,
            0 0 2px 0 rgba(0, 0, 0, 0.18)
          );
        }

        /* Headings + Glance (kept excluded) */
        :host(hui-heading-card) ha-card,
        :host(hui-glance-card) ha-card {
          background: none !important;
        }
        :host(hui-heading-card) ha-card::before,
        :host(hui-glance-card) ha-card::before {
          content: none !important;
        }

        /* IMPORTANT: Allow normal Markdown to be glassy; only exclude text-only */
        /* (Fix) Removed global :host(hui-markdown-card) exclusion so standard Markdown gets glass. */

        /* Data tables */
        .mdc-data-table {
          background: none !important;
        }
        .mdc-data-table__header-cell {
          background: rgba(30, 33, 54, 0.18) !important;
          box-shadow: var(--ha-card-glass-inset-shadow) !important;                         /* 1.2 Glass – consistent bevel */
        }

        /* Markdown card with text_only → no background or blur */                          # 1.1.9 Change - text only markdown and mushroom title card no background // Beginning
        :host(.text-only) ha-card,
        :host(.text-only) ha-card::before,
        ha-card.text-only,
        ha-card.text-only::before {                                                         /* 1.2 Glass – add ha-card.text-only for compatibility */
          background: none !important;
          box-shadow: none !important;
          content: none !important;
        }

        /* Mushroom title card (no background or blur) */
        :host(mushroom-title-card) ha-card {
          background: none !important;
          box-shadow: none !important;                                                      /* 1.2 Glass – ensure no bevel */
        }
        :host(mushroom-title-card) ha-card::before {
          content: none !important;
        }

        /* === Prevent frosted/glass from applying to bubble cards ===                      # 1.1.9 Change - Bubble cards are no longer applied */
        :host(.type-custom-bubble-card) ha-card {
          background: none !important;
          box-shadow: none !important;
          border-radius: 0px !important;
        }
        :host(.type-custom-bubble-card) ha-card::before {
          content: none !important;
          background: none !important;
        }

        /* === Prevent frosted/glass on mushroom-chips-card outer container ===             # 1.1.9 Change - Outer mushroom chips no longer applied */
        :host(mushroom-chips-card) ha-card {
          background: none !important;
          box-shadow: none !important;
        }
        :host(mushroom-chips-card) ha-card::before {
          content: none !important;
          background: none !important;
        }

        /* (Removed) .bubble-button-card-container styling to avoid conflicts               # 1.2 Glass – matches Light exclusions */

      # =========================
      # CARD-MOD-ROOT GLOBAL CSS
      # =========================
      card-mod-root: |
        :host {
          --ha-card-background: rgba(30, 30, 30, 0.1);
          --ha-card-box-shadow: 0 12px 20px rgba(0, 0, 0, 0.28);
          --ha-card-border-width: 0.5px;
          --ha-card-border-color: rgba(234, 235, 238, 0.1);

          /* Glass system tokens (new, dark-tuned) */
          --ha-card-glass-tint: rgba(28, 29, 33, 0.18);                                      # 1.2 Glass – global tint layer
          --ha-card-glass-inset-shadow:                                                      # 1.2 Glass – inner bevel/glow (Liquid Glass inspired)
            3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.15) inset,
            -2px -2px 0.5px -2px rgba(255, 255, 255, 0.1) inset,
            0 0 8px 1px rgba(255, 255, 255, 0.06) inset,
            0 0 2px 0 rgba(0, 0, 0, 0.18);

          /* Tokens - match structure to Light theme for consistency */
          --token-rgb-primary: 106, 116, 211;
          --token-rgb-black: 0, 0, 0;
          --token-rgb-white: 234, 235, 238;
          --token-rgb-purple: 129, 45, 250;
          --token-rgb-pink: 204, 0, 136;
          --token-rgb-red: 204, 0, 51;
          --token-rgb-deep-purple: 98, 0, 234;
          --token-rgb-indigo: 48, 63, 159;
          --token-rgb-blue: 33, 150, 243;
          --token-rgb-light-blue: 3, 169, 244;
          --token-rgb-cyan: 106, 116, 211;
          --token-rgb-teal: 106, 116, 211;
          --token-rgb-green: 56, 142, 60;
          --token-rgb-light-green: 139, 195, 74;
          --token-rgb-lime: 205, 220, 57;
          --token-rgb-yellow: 250, 183, 0;
          --token-rgb-amber: 255, 193, 7;
          --token-rgb-orange: 255, 158, 0;
          --token-rgb-deep-orange: 255, 87, 34;
          --token-rgb-brown: 121, 85, 72;
          --token-rgb-grey: 103, 104, 119;
          --token-rgb-blue-grey: 96, 125, 139;
          --token-rgb-disabled: 189, 189, 189;
          --token-rgb-state-inactive: 176, 190, 197;

          --token-color-primary: rgb(var(--token-rgb-primary));
          --token-color-primary-light: rgb(167 182 199);
          --token-color-accent: rgb(var(--token-rgb-teal));
          --token-color-disabled: rgb(173 176 184);
          --token-color-feedback-info: rgb(106, 116, 211);
          --token-color-feedback-warning: rgb(255, 219, 117);
          --token-color-feedback-error: rgb(234, 114, 135);
          --token-color-feedback-success: rgb(118, 214, 152);
          --token-color-icon-primary: rgba(234, 235, 238, 0.95);
          --token-color-icon-secondary: rgba(234, 235, 238, 0.75);
          --token-color-icon-sidebar: rgba(234, 235, 238, 0.6);
          --token-color-icon-sidebar-selected: var(--token-color-icon-primary);
          --token-color-text-primary: rgba(234, 235, 238, 0.98);
          --token-color-text-secondary: rgba(234, 235, 238, 0.8);
          --token-color-text-disabled: rgba(234, 235, 238, 0.45);
          --token-color-text-sidebar-selected: var(--token-color-text-primary);
          --token-color-text-sidebar: var(--token-color-text-secondary);
          --token-color-text-label-badge: rgba(234, 235, 238, 0.85);
          --token-color-text-chip: rgb(var(--token-rgb-white));
          --token-color-background-base: rgba(25, 28, 45, 0.8);
          --token-color-background-secondary: rgba(30, 33, 54, 0.7);
          --token-color-background-sidebar: var(--token-color-background-base);
          --token-color-background-input-base: rgba(30, 33, 54, 0.7);
          --token-color-background-input-disabled: rgba(30, 33, 54, 0.5);
          --token-color-background-label-badge: rgb(60, 60, 78);
          --token-color-background-card: rgba(28, 29, 33, 0.85);
          --token-color-background-skrim: rgba(0, 0, 0, 0.7);
          --token-color-background-divider: rgba(84, 84, 98, 0.28);
          --token-color-background-scrollbar-thumb: rgb(68, 68, 88);
          --token-color-background-label-badge-red: var(--token-color-feedback-error);
          --token-color-background-label-badge-blue: var(--token-color-feedback-info);
          --token-color-background-label-badge-green: rgb(78, 183, 128);
          --token-color-background-label-badge-yellow: var(--token-color-feedback-warning);
          --token-color-background-label-badge-grey: rgb(83, 90, 103);
          --token-color-background-popup-scrim: rgba(0, 0, 0, 1);
          --token-color-border-card: rgba(234, 235, 238, 0.22);
          --token-color-switch-button-unchecked: rgba(234, 235, 238, 0.3);
          --token-color-switch-track-unchecked: rgba(234, 235, 238, 0.18);
          --token-color-codemirror-string: rgb(164, 209, 255);
          --token-color-codemirror-keyword: rgb(148, 182, 255);
          --token-color-codemirror-number: rgb(255, 171, 64);
          --token-shadow-card-medium: 0 12px 20px rgba(0, 0, 0, 0.28);
          --token-size-radius-small: 10px;
          --token-size-radius-medium: 14px;
          --token-size-radius-large: 18px;
          --token-size-radius-card: var(--token-size-radius-large);
          --token-size-width-border-card: 0.5px;
          --token-size-height-slider: 5px;
          --token-size-height-navbar: 60px;
          --token-size-font-xs: calc(10px * var(--ha-font-size-scale));
          --token-size-font-s: calc(12px * var(--ha-font-size-scale));
          --token-size-font-m: calc(14px * var(--ha-font-size-scale));
          --token-size-font-l: calc(15px * var(--ha-font-size-scale));
          --token-size-font-xl: calc(20px * var(--ha-font-size-scale));
          --token-size-font-2xl: calc(25px * var(--ha-font-size-scale));
          --token-size-font-3xl: calc(29px * var(--ha-font-size-scale));
          --token-size-font-4xl: calc(33px * var(--ha-font-size-scale));
          --token-size-font-5xl: calc(42px * var(--ha-font-size-scale));
          --token-size-spacing-medium: 17px;
          --token-size-section-min-width: 320px;
          --token-color-transparent: rgba(0, 0, 0, 0);
          --token-color-black: rgb(0, 0, 0);
          --token-color-white: rgb(234, 235, 238);
          --token-opacity-ripple-hover: 0.1;
          --token-font-family-primary: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
          --token-weight-font-title-card: 500;
          
          # Additional color variables
          --token-color-red: rgb(var(--token-rgb-red));
          --token-color-green: rgb(var(--token-rgb-green));
          --token-color-blue: rgb(var(--token-rgb-blue));
          --token-color-yellow: rgb(var(--token-rgb-yellow));
          --token-color-orange: rgb(var(--token-rgb-orange));
          --token-color-purple: rgb(var(--token-rgb-purple));
          --token-color-pink: rgb(var(--token-rgb-pink));
          --token-color-amber: rgb(var(--token-rgb-amber));
          --token-color-cyan: rgb(var(--token-rgb-cyan));
          --token-color-teal: rgb(var(--token-rgb-teal));
          --token-color-lime: rgb(var(--token-rgb-lime));
          --token-color-light-green: rgb(var(--token-rgb-light-green));
          --token-color-deep-orange: rgb(var(--token-rgb-deep-orange));
          --token-color-brown: rgb(var(--token-rgb-brown));
          --token-color-grey: rgb(var(--token-rgb-grey));
          --token-color-blue-grey: rgb(var(--token-rgb-blue-grey));
          --token-color-indigo: rgb(var(--token-rgb-indigo));
          --token-color-deep-purple: rgb(var(--token-rgb-deep-purple));
          --token-color-light-blue: rgb(var(--token-rgb-light-blue));
        }

        /* SIDEBAR BLUR */
        .mdc-drawer .mdc-drawer__content {
          background: rgba(25, 28, 45, 0.8) !important;
          box-shadow: var(--ha-card-glass-inset-shadow) !important;                         # 1.2 Glass – subtle inner edge for consistency
        }

        /* CARDS RADIUS */
        ha-card {
          border-radius: var(--token-size-radius-large);
          border: var(--ha-card-border, var(--ha-card-border-width) solid var(--ha-card-border-color));       # 1.2 Glass – ensure border follows tokens
          box-shadow: var(--ha-card-box-shadow);
        }
        ha-card ha-card {
          --ha-card-border-width: 0px;
        }

        /* DRAWER SCRIM */
        ha-drawer {
          --mdc-drawer-scrim-color: rgba(0, 0, 0, 0.8) !important;
        }

        /* LABEL BADGE */
        ha-label-badge {
          --label-badge-background-color: rgba(60, 60, 78, 0.28) !important;
          --label-badge-text-color: rgba(234, 235, 238, 0.9) !important;
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.10) !important;
          border: 0.5px solid rgba(234, 235, 238, 0.22) !important;
        }

        /* INPUTS */
        input, ha-textfield, ha-select {
          background: rgba(30, 33, 54, 0.7) !important;
          border-radius: var(--token-size-radius-small);
          border: none !important;
          box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.09) !important;
        }

        /* Custom text divider row size fix */
        custom-text-divider-row .text-divider-content {
          background: #181929 !important;
          opacity: 1 !important;
          box-shadow: none !important;
          border-radius: 10px !important;
          padding: 0 8px !important;
          --text-divider-font-size: 16px !important;
          --text-divider-line-size: 1px;
          --text-divider-color: rgba(234, 235, 238, 1) !important;
        }

      # =========================
      # TYPOGRAPHY
      # =========================
      ha-font-family-body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      ha-font-family-heading: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      ha-font-family-code: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      ha-font-family-longform: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      ha-card-header-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      mdc-typography-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      mdc-typography-button-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      mdc-typography-body1-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      md-list-item-label-text-font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      paper-font-common-base_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      paper-font-common-code_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      paper-font-body1_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      paper-font-subhead_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      paper-font-headline_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      paper-font-caption_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
      paper-font-title_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'

      ha-font-weight-normal: '400'
      ha-font-weight-medium: '500'
      ha-font-weight-bold: '700'
      ha-font-weight-body: '400'
      ha-font-weight-heading: '500'
      ha-font-weight-action: '500'
      mdc-typography-button-font-weight: '500'
      title-font-weight: 'var(--token-weight-font-title-card)'

      ha-font-size-xs: '10px'
      ha-font-size-s: '12px'
      ha-font-size-m: '14px'
      ha-font-size-l: '15px'
      ha-font-size-xl: '20px'
      ha-font-size-2xl: '25px'
      ha-font-size-3xl: '29px'
      ha-font-size-4xl: '33px'
      ha-font-size-5xl: '42px'
      title-font-size: '20px'
      ha-heading-card-title-font-size: 'var(--token-size-font-l)'
      ha-heading-card-title-font-weight: '500'
      ha-font-smoothing: 'antialiased'

      # =========================
      # COLORS & MISCELLANEOUS
      # =========================
      # 1.2.1 - change add HA 2025.8 primary color scale aligned to theme
      ha-color-primary-05: '#0D0E19'
      ha-color-primary-10: '#131526'
      ha-color-primary-20: '#20233F'
      ha-color-primary-30: '#30345F'
      ha-color-primary-40: '#40467F'
      ha-color-primary-50: '#6A74D3'   # base theme primary (kept)
      ha-color-primary-60: '#8F97DE'
      ha-color-primary-70: '#ADB3E7'
      ha-color-primary-80: '#D2D5F2'
      ha-color-primary-90: '#EAECF9'
      ha-color-primary-95: '#F6F7FC'

      # 1.2.1 - change add aliases for compatibility (some threads reference --color-primary-xx)
      color-primary-05: '#0D0E19'
      color-primary-10: '#131526'
      color-primary-20: '#20233F'
      color-primary-30: '#30345F'
      color-primary-40: '#40467F'
      color-primary-50: '#6A74D3'
      color-primary-60: '#8F97DE'
      color-primary-70: '#ADB3E7'
      color-primary-80: '#D2D5F2'
      color-primary-90: '#EAECF9'
      color-primary-95: '#F6F7FC'
      primary-text-color: 'rgba(234, 235, 238, 0.98)'
      secondary-text-color: 'rgba(234, 235, 238, 0.8)'
      text-primary-color: 'rgba(234, 235, 238, 0.98)'
      disabled-text-color: 'rgba(234, 235, 238, 0.45)'
      text-light-primary-color: 'rgb(234, 235, 238)'
      paper-item-icon-color: 'rgba(234, 235, 238, 0.95)'
      state-inactive-color: 'rgba(234, 235, 238, 0.8)'
      state-icon-color: 'rgba(234, 235, 238, 0.95)'
      state-on-color: 'rgb(118, 214, 152)'
      state-off-color: 'rgb(234, 114, 135)'
      label-badge-text-color: 'rgba(234, 235, 238, 0.85)'
      label-badge-red: 'rgb(234, 114, 135)'
      label-badge-blue: 'rgb(106, 116, 211)'
      label-badge-green: 'rgb(78, 183, 128)'
      label-badge-yellow: 'rgb(255, 219, 117)'
      label-badge-grey: 'rgb(83, 90, 103)'
      ha-chip-text-color: 'rgb(234, 235, 238)'

      primary-color: 'rgb(106, 116, 211)'
      dark-primary-color: 'rgb(106, 116, 211)'
      light-primary-color: 'rgb(167, 182, 199)'
      accent-color: 'rgb(106, 116, 211)'
      divider-color: 'rgba(84, 84, 98, 0.28)'
      scrollbar-thumb-color: 'rgb(68, 68, 88)'
      disabled-color: 'rgb(173, 176, 184)'
      info-color: 'rgb(106, 116, 211)'
      success-color: 'rgb(118, 214, 152)'
      warning-color: 'rgb(255, 219, 117)'
      error-color: 'rgb(234, 114, 135)'
      background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/wessamlauf/homeassistant-frosted-glass-themes@refs/heads/main/themes/frosted-glass-dark-background.jpg')"
      lovelace-background: 'var(--background-image)'
      primary-background-color: 'rgba(30, 30, 30, 1)'                                      # 1.2 change - improved background color for a darker feel 
      secondary-background-color: 'rgba(30, 33, 54, 0.6)'
      clear-background-color: 'rgba(30, 33, 54, 0.7)'
      card-background-color: 'rgba(30, 30, 30, 0.85)'
      ha-card-background: 'rgba(30, 30, 30, 0.9)'
      ha-card-border-radius: '18px'
      ha-card-border-color: 'rgba(234, 235, 238, 0.22)'
      ha-card-border-width: '0.5px'
      ha-card-border-style: 'solid'
      ha-card-border: '0.5px solid rgba(234, 235, 238, 0.1)'
      ha-card-box-shadow: '0 12px 20px rgba(0, 0, 0, 0.28)'
      ha-view-sections-column-gap: '17px'
      ha-view-sections-column-min-width: 320px

      # Sliders, toggles, switches
      paper-slider-knob-color: 'rgb(106, 116, 211)'
      paper-slider-knob-start-color: 'rgb(106, 116, 211)'
      paper-slider-pin-color: 'rgb(106, 116, 211)'
      paper-slider-active-color: 'rgb(106, 116, 211)'
      paper-slider-secondary-color: 'rgb(167, 182, 199)'
      switch-checked-button-color: 'rgb(106, 116, 211)'
      switch-checked-track-color: 'rgb(106, 116, 211)'
      switch-unchecked-button-color: 'rgba(234, 235, 238, 0.3)'
      switch-unchecked-track-color: 'rgba(234, 235, 238, 0.18)'
      paper-toggle-button-checked-button-color: 'rgb(106, 116, 211)'
      paper-toggle-button-checked-bar-color: 'rgb(106, 116, 211)'
      paper-toggle-button-unchecked-button-color: 'rgba(234, 235, 238, 0.3)'
      paper-toggle-button-unchecked-bar-color: 'rgba(234, 235, 238, 0.18)'
      mdc-checkbox-unchecked-color: 'rgba(234, 235, 238, 0.75)'
      mdc-radio-unchecked-color: 'rgba(234, 235, 238, 0.75)'
      mdc-ripple-hover-opacity: '0.1'

      # Inputs
      input-background-color: 'rgba(50, 50, 50, 0.1)'
      input-background-token-color-disabled: 'rgba(50, 50, 50, 0.1)'
      input-fill-color: 'rgba(50,50, 50, 0.1)'
      input-ink-color: 'rgba(234, 235, 238, 0.98)'
      input-label-ink-color: 'rgba(234, 235, 238, 0.98)'
      input-disabled-fill-color: 'rgba(30, 33, 54, 0.5)'
      input-disabled-ink-color: 'rgba(234, 235, 238, 0.45)'
      input-disabled-label-ink-color: 'rgba(234, 235, 238, 0.45)'
      input-idle-line-color: 'transparent'
      input-dropdown-icon-color: 'rgba(234, 235, 238, 0.8)'
      input-hover-line-color: 'rgb(106, 116, 211)'
      mdc-select-idle-line-color: 'transparent'
      mdc-text-field-idle-line-color: 'transparent'

      # Code Editor & Misc
      code-editor-background-color: 'rgba(25, 28, 45, 1)'
      codemirror-meta: 'rgba(234, 235, 238, 0.98)'
      codemirror-property: 'rgb(106, 116, 211)'
      codemirror-atom: 'rgb(106, 116, 211)'
      codemirror-string: 'rgb(164, 209, 255)'
      codemirror-keyword: 'rgb(148, 182, 255)'
      codemirror-number: 'rgb(255, 171, 64)'
      mcg-title-font-weight: '400'
      mush-title-font-weight: '500'
      mush-title-font-size: 'var(--token-size-font-2xl)'
      light-grey-color: 'rgb(103, 104, 119)'
      mush-rgb-grey: '103, 104, 119'

      # Misc sizes
      paper-slider-height: '5px'
      border-radius: '18px'

      # --- End of Theme """