HaCasa Peach:
  --control-circular-slider-color: var(--primary-color)
  masonry-view-card-margin: 15px
  card-mod-theme: HaCasa Peach
  card-mod-root: |
    @media (orientation: portrait) {
      .header{
          display: none;
      }
      #view {
          padding: 0 !important;
          max-height: 100vh !important;
      }
      .button-card-main {
        font-size: 5rem;
      }
    }

  ha-card-border-radius: 20px
  ha-card-border-width: 0px

  # HaCasa Colors
  color-green: "#93d385"
  color-red: "#f06767"
  color-blue: "#67b0f0"
  color-yellow: "#f0d467"
  color-purple: "#b785d3"
  color-peach: "#ffa08a"
  color-orange: "#f0b467"
  color-gold: "#ddae7b"

  # HomeAssistant Theme Variables
  primary-color: "var(--color-peach)"
  ha-card-backgound-active: "var(--primary-color)"
  accent-color: var(--primary-color)
  state-input_boolean-active-color: var(--primary-color)
  state-alarm_control_panel-disarmed-color: var(--icon-color)
  ha-card-box-shadow: none

  # slider styling
  md-slider-active-track-color: var(--color-peach)
  md-slider-inactive-track-color: rgba(255,255,255,.2)
  md-slider-handle-color: var(--color-peach)
  md-slider-focus-handle-color: var(--color-peach)
  md-slider-hover-handle-color: "#dbdbdb"
  md-slider-handle-shadow-color: none
  md-slider-pressed-handle-color: "#dbdbdb"
  md-slider-handle-width: 0px
  md-slider-handle-height: 0px
  md-ripple-hover-color: transparent
  md-slider-label-container-color: transparent
  md-slider-label-container-height: 0px
  md-slider-label-text-color: transparent
  md-slider-hover-state-layer-color: white
  md-slider-pressed-state-layer-color: white

  #font
  primary-font-family: montserrat, Roboto, system-ui
  ha-font-family-body: var(--primary-font-family)
  ha-card-header-font-family: var(--primary-font-family)
  mdc-typography-body1-font-family: var(--primary-font-family)
  mdc-typography-font-family: var(--primary-font-family)

  font-size-primary: 14px
  font-size-secondary: 12px
  font-weight-primary: 700
  font-weight-secondary: 500

  #browser_mod.popup
  dialog-backdrop-filter: blur(2em) brightness(0.75)
  popup-background-color: rgba(34,38,39,0.9)
  popup-border-width: 1px
  popup-border-radius: 1em
  popup-padding-x: 0px
  popup-padding-y: 0px
  popup-min-width: 440px
  tablet-popup-header-color: rgba(200, 218, 222, 0.05)
  tablet-popup-content-padding: 1.1em 2.2em 1.6em 1.5em
  tablet-popup-button-padding: 0.1em 2em 1.8em 2em
  tablet-popup-border-style: 1.5px solid rgba(0,0,0,0.2)
  tablet-popup-align-dialog: center
  tablet-popup-margin-top: 0px

  ####################### LIGHT MODE ####################
  modes:
    light:
      # HaCasa Variables
      icon-color: "#cccfd9"
      opacity-contrast-100: rgba(255,255,255,.2)
      opacity-contrast-0: rgba(0,0,0,.2)
      subtext-color: var(--icon-color)
      button-card-background: "#f2f2f2"

      # HomeAssistant Variables
      primary-background-color: "#f2f4f9"
      primary-text-color: "#48506f"
      ha-card-background: "#fff"
      app-header-background-color: var(--primary-background-color)
      app-header-text-color: var(--primary-text-color)
      secondary-text-color: "#616987"
      sidebar-icon-color: var(--primary-text)

      box-shadow: "5px 5px 10px #d3d5d7, -5px -5px 10px #ffffff"

    dark:
      # HaCasa Variables
      icon-color: "var(--primary-text-color)"
      opacity-contrast-0: rgba(255,255,255,.2)
      opacity-contrast-100: rgba(255,255,255,.2)
      subtext-color: "#6f6f6f"
      button-card-background: "#202020"
      weather-card-overlay: "linear-gradient(0deg, rgba(0,0,0,0.5676471272102591) 0%, rgba(0,0,0,1) 93%)"

      # HomeAssistant Variables
      ha-card-background: "#1a1a1a"
      primary-background-color: "#111111"
      primary-text-color: "#f5f5f5"
      state-alarm_control_panel-disarmed-color: var(--icon-color)
      app-header-background-color: var(--primary-background-color)
      app-header-text-color: "#fff"

      box-shadow: "5px 5px 10px #070707, -5px -5px 10px #1d1d1d"