:where(:root),
:where(:host) {
  --aura-contrast-level: 1;

  --aura-accent-color-light: var(--aura-blue);
  --aura-accent-color-dark: var(--aura-blue);

  --aura-accent-color-light-initial: var(--aura-accent-color-light);
  --aura-accent-color-dark-initial: var(--aura-accent-color-dark);

  --aura-background-color-light: oklch(0.95 0.005 248);
  --aura-background-color-dark: oklch(0.2 0.01 260);

  --aura-app-background: var(--aura-background-color);

  --vaadin-focus-ring-color: light-dark(
    oklch(from var(--aura-accent-color-light) min(l, 0.62) c h),
    oklch(from var(--aura-accent-color-dark) max(l, 0.62) c h)
  );
  --vaadin-user-color: var(--aura-blue);
  color: var(--vaadin-text-color);
  background: var(--aura-app-background);
  background-size: 100vw 100vh;
  background-attachment: fixed;
}

@supports (color: hsl(0 0 0)) {
  @scope (:root) {
    :where(:scope) {
      --_bg-alt: light-dark(
        oklch(
          from var(--aura-background-color-light) calc(l + c) min(c, c * 2 - l / 20)
            calc(h + 180 * var(--_vaadin-safari-17-deg, 1) * l * c * 4)
        ),
        oklch(
          from var(--aura-background-color-dark) calc(l + c) min(c, c * 2 - l / 20)
            calc(h + 180 * var(--_vaadin-safari-17-deg, 1) * l * c * 4)
        )
      );

      --_bg-accent: radial-gradient(
        circle at 0% 0%,
        light-dark(
          oklch(from var(--aura-background-color-light) min(1, l + c * 3) min(c, c * 3) h),
          oklch(from var(--aura-background-color-dark) min(1, l + c) clamp(0, c * 1.5, 0.4) h)
        ),
        transparent 30%
      );
      --aura-app-background:
        var(--_bg-accent),
        radial-gradient(circle at 25% 0% in xyz, var(--aura-background-color) 33%, var(--_bg-alt))
          var(--aura-background-color);
    }
  }
}

:where(:root),
:where(:host),
vaadin-app-layout > :not([slot]),
vaadin-avatar,
vaadin-badge,
vaadin-button,
vaadin-upload-button,
vaadin-context-menu-item,
vaadin-confirm-dialog,
vaadin-crud-edit,
vaadin-drawer-toggle,
vaadin-dialog,
vaadin-menu-bar-button,
vaadin-menu-bar-item,
vaadin-message::part(attachment),
vaadin-notification-container,
vaadin-notification-card,
vaadin-notification-card::part(overlay),
vaadin-checkbox::part(checkbox),
vaadin-radio-button::part(radio),
vaadin-side-nav-item::part(content),
vaadin-tab,
vaadin-upload-file,
:where(
  .aura-accent-color,
  .aura-accent-neutral,
  .aura-accent-red,
  .aura-accent-orange,
  .aura-accent-yellow,
  .aura-accent-green,
  .aura-accent-blue,
  .aura-accent-purple,
  .v-info,
  .v-success,
  .v-warning,
  .v-error
) {
  --aura-neutral-light: oklch(
    from var(--aura-background-color-light) calc(0.2 - 0.05 * var(--aura-contrast-level)) calc(c * l * 0.8) h
  );
  --aura-neutral-dark: oklch(
    from var(--aura-background-color-dark) calc(0.9 + 0.1 * var(--aura-contrast-level)) calc(c * l) h
  );
  --aura-neutral: light-dark(var(--aura-neutral-light), var(--aura-neutral-dark));
  --vaadin-text-color: light-dark(var(--aura-neutral-light), var(--aura-neutral-dark));
  --vaadin-text-color-secondary: color-mix(
    in oklch,
    var(--vaadin-text-color) min(95%, 60% + 5% * var(--aura-contrast-level)),
    transparent
  );
  --vaadin-text-color-disabled: color-mix(
    in oklch,
    var(--vaadin-text-color) min(95%, 30% + 3% * var(--aura-contrast-level)),
    transparent
  );
  --_border-color-base: light-dark(
    oklch(from var(--aura-background-color-light) 0.1 c h),
    oklch(from var(--aura-background-color-dark) calc(0.8 + max(0, 0.2 - l) + c / 2) calc(c - l / 4) h)
  );
  --vaadin-border-color: color-mix(
    in srgb,
    var(--_border-color-base) calc(14% + 6% * var(--aura-contrast-level)),
    transparent
  );
  --vaadin-border-color-secondary: light-dark(
    color-mix(in srgb, var(--_border-color-base) max(6%, 5% + 3% * var(--aura-contrast-level)), transparent),
    color-mix(in srgb, var(--_border-color-base) max(8%, 7% + 3% * var(--aura-contrast-level)), transparent)
  );
  --aura-accent-contrast-color-light: oklch(
    from var(--aura-accent-color-light) clamp(0, (0.62 - l) * 1000, 1) 0 0 / clamp(0.8, (0.62 - l) * 1000, 1)
  );
  --aura-accent-contrast-color-dark: oklch(
    from var(--aura-accent-color-dark) clamp(0, (0.62 - l) * 1000, 1) 0 0 / clamp(0.8, (0.62 - l) * 1000, 1)
  );
  --aura-accent-text-color-light: oklch(
    from var(--aura-accent-color-light) min(0.55, 0.35 - 0.05 * var(--aura-contrast-level) + c) calc(c * 0.9) h
  );
  --aura-accent-text-color-dark: oklch(
    from var(--aura-accent-color-dark) max(0.8, 0.9 + 0.1 * var(--aura-contrast-level) - c * 2) calc(c * 0.9) h
  );
  --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
  --aura-accent-contrast-color: light-dark(
    var(--aura-accent-contrast-color-light),
    var(--aura-accent-contrast-color-dark)
  );
  --aura-accent-text-color: light-dark(var(--aura-accent-text-color-light), var(--aura-accent-text-color-dark));
  --_accent-surface-light: color-mix(
    in srgb,
    color-mix(
        in srgb,
        oklch(from var(--aura-accent-color-light) l c h / min(max(c / 0.4, 0), 1))
          calc(23% - 4% * var(--aura-surface-level)),
        var(--aura-surface-color-solid)
      )
      calc(100% * var(--aura-surface-opacity)),
    transparent
  );
  --_accent-surface-dark: color-mix(
    in srgb,
    color-mix(
        in srgb,
        oklch(from var(--aura-accent-color-dark) l c h / min(max(c / 0.4, 0), 1))
          calc(23% - 3% * var(--aura-surface-level)),
        var(--aura-surface-color-solid)
      )
      calc(100% * var(--aura-surface-opacity)),
    transparent
  );
  /* This color is very slightly semi-transparent, depending on the saturation/chroma of the accent color (only an issue in Safari 17). */
  --aura-accent-surface: light-dark(var(--_accent-surface-light), var(--_accent-surface-dark));
  @supports (color: hsl(0 0 0)) {
    /* This removes the semi-transparency */
    --aura-accent-surface: oklch(
      from light-dark(var(--_accent-surface-light), var(--_accent-surface-dark)) l c h / var(--aura-surface-opacity)
    );
  }
  --_accent-border: light-dark(
    oklch(from var(--aura-accent-color-light) 0.8 calc(c * 1.1) h / min(1, c + (1 - l) / 10)),
    oklch(from var(--aura-accent-color-dark) 0.8 calc(c * 1.1) h / min(1, c + (1 - l) / 10))
  );
  --aura-accent-border-color: color-mix(
    in srgb,
    var(--_accent-border) calc(30% - 1% * var(--aura-surface-level) + 1% * var(--aura-contrast-level)),
    var(--vaadin-border-color) 60%
  );
  --_color-base: light-dark(
    oklch(from var(--aura-background-color-light) 0.1 calc(c / 2 + c * (1 - c)) h),
    oklch(from var(--aura-background-color-dark) 1 c h)
  );
  --aura-background-color: light-dark(var(--aura-background-color-light), var(--aura-background-color-dark));
  --vaadin-background-container: color-mix(
    in srgb,
    var(--_color-base) calc(3% + min(3%, 1% * var(--aura-contrast-level))),
    transparent
  );
  --vaadin-background-container-strong: color-mix(
    in srgb,
    var(--_color-base) calc(7% + min(8%, 1.5% * var(--aura-contrast-level))),
    transparent
  );
  accent-color: var(--aura-accent-color);
}

:where(h1, h2, h3, h4, h5, h6) {
  color: var(--vaadin-text-color);
}

:where(a:any-link) {
  color: var(--aura-accent-text-color);
}

:is(#id, .aura-accent-color) {
  --aura-accent-color-light: var(--aura-accent-color-light-initial);
  --aura-accent-color-dark: var(--aura-accent-color-dark-initial);
  --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
}

:is(#id, .aura-accent-neutral, .v-neutral) {
  --aura-accent-color-light: var(--aura-neutral-light);
  --aura-accent-color-dark: var(--aura-neutral-dark);
  --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
}

:is(#id, [theme~='danger'], [theme~='error'], .aura-accent-red, .v-error) {
  --aura-accent-color-light: var(--aura-red);
  --aura-accent-color-dark: var(--aura-red);
  --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
}

:is(#id, [theme~='success'], .aura-accent-green, .v-success) {
  --aura-accent-color-light: var(--aura-green);
  --aura-accent-color-dark: var(--aura-green);
  --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
}

:is(#id, [theme~='warning'], .aura-accent-yellow, .v-warning) {
  --aura-accent-color-light: var(--aura-yellow);
  --aura-accent-color-dark: var(--aura-yellow);
  --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
}

:is(#id, .aura-accent-orange) {
  --aura-accent-color-light: var(--aura-orange);
  --aura-accent-color-dark: var(--aura-orange);
  --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
}

:is(#id, .aura-accent-purple) {
  --aura-accent-color-light: var(--aura-purple);
  --aura-accent-color-dark: var(--aura-purple);
  --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
}

:is(#id, [theme~='info'], .aura-accent-blue, .v-info) {
  --aura-accent-color-light: var(--aura-blue);
  --aura-accent-color-dark: var(--aura-blue);
  --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
}