@mixin light-theme() {
  color-scheme: light;
  --ec-h: 0;
  --ec-s: 0%;
  //--ec-l-50: 97.30%;
  //--ec-l-100: 95.70%;
  //--ec-l-200: 93.70%;
  --ec-l-300: 91.00%;
  //--ec-l-400: 87.80%;
  --ec-l-500: 83.50%;
  --ec-l-600: 78.40%;
  --ec-l-700: 71.40%;
  //--ec-l-800: 62.40%;
  //--ec-l-900: 48.20%;
  //--ec-l-950: 13.30%;
  --ec-bg-fallback-color: #fff;
}

@mixin dark-theme() {
  color-scheme: dark;
  --ec-h: 215;
  --ec-s: 15%;
  //--ec-l-50: 5.10%;
  //--ec-l-100: 8.60%;
  //--ec-l-200: 13.30%;
  --ec-l-300: 25.50%;
  //--ec-l-400: 34.10%;
  --ec-l-500: 42.40%;
  --ec-l-600: 49.80%;
  --ec-l-700: 57.30%;
  //--ec-l-800: 64.70%;
  //--ec-l-900: 72.50%;
  //--ec-l-950: 80.40%;
  --ec-bg-fallback-color: #22272e;
}

.ec {
  /* HSL */
  @include light-theme;
  --ec-hs: var(--ec-h), var(--ec-s);

  /* Main color */
  //--ec-color-50: hsl(var(--ec-hs), var(--ec-l-50));
  //--ec-color-100: hsl(var(--ec-hs), var(--ec-l-100));
  //--ec-color-200: hsl(var(--ec-hs), var(--ec-l-200));
  --ec-color-300: hsl(var(--ec-hs), var(--ec-l-300));
  //--ec-color-400: hsl(var(--ec-hs), var(--ec-l-400));
  --ec-color-500: hsl(var(--ec-hs), var(--ec-l-500));
  --ec-color-600: hsl(var(--ec-hs), var(--ec-l-600));
  --ec-color-700: hsl(var(--ec-hs), var(--ec-l-700));
  //--ec-color-800: hsl(var(--ec-hs), var(--ec-l-800));
  //--ec-color-900: hsl(var(--ec-hs), var(--ec-l-900));
  //--ec-color-950: hsl(var(--ec-hs), var(--ec-l-950));

  /* General props */
  //--ec-bg-color: <color>;  // can be set by the user
  //--ec-text-color: <color>;  // can be set by the user
  --ec-border-color: var(--ec-color-500);
  --ec-accent-color: var(--ec-color-600);

  /* Buttons */
  --ec-button-bg-color: var(--ec-bg-color);
  --ec-button-border-color: var(--ec-color-600);
  --ec-button-text-color: var(--ec-text-color);
  --ec-button-active-bg-color: var(--ec-color-300);
  --ec-button-active-border-color: var(--ec-color-700);
  --ec-button-active-text-color: var(--ec-button-text-color);

  /* Events */
  --ec-event-bg-color: #039be5;
  --ec-event-text-color: #fff;
  --ec-bg-event-color: var(--ec-color-500);
  --ec-bg-event-opacity: 0.3;

  /* Days */
  --ec-list-day-bg-color: var(--ec-bg-color, var(--ec-bg-fallback-color));
  --ec-today-bg-color: rgba(255, 220, 40, .15);
  --ec-highlight-color: rgba(188, 232, 241, .3);

  /* Popup */
  --ec-popup-bg-color: var(--ec-bg-color, var(--ec-bg-fallback-color));

  /* Now Indicator */
  --ec-now-indicator-color: #ea4335;

  .ec-dark & {
    @include dark-theme;
  }

  @media (prefers-color-scheme: dark) {
    .ec-auto-dark & {
      @include dark-theme;
    }
  }
}