@import '~pollen-css/dist/pollen.css';

@import '~@shoelace-style/shoelace/dist/themes/light.css';
@import '~@shoelace-style/shoelace/dist/themes/dark.css';

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: var(--pos-app-background);
}

:root {
  --pos-primary-text-color: var(--color-grey-50);
  --pos-normal-text-color: var(--color-grey-900);
  --pos-secondary-text-color: var(--color-grey-800);
  --pos-subtle-text-color: var(--color-grey-600);
  --pos-disabled-text-color: var(--pos-subtle-text-color);
  --pos-primary-color: var(--color-blue-800);
  --pos-primary-highlight-color: var(--color-blue-300);
  --pos-disabled-color: var(--color-grey-100);
  --pos-background-color: var(--color-grey-50);
  --pos-input-background-color: var(--color-white);
  --pos-border-color: var(--color-grey-200);
  --pos-secondary-border-color: var(--color-grey-800);
  --pos-input-outline: var(--size-px) solid var(--color-grey-700);
  --pos-input-focus-outline: var(--size-px) solid var(--pos-primary-color);
  --pos-border-solid: var(--size-px) solid var(--pos-border-color);
  --pos-app-background: linear-gradient(230deg, rgb(251, 251, 255) 0%, rgb(215, 223, 252) 100%);
  --pos-app-background:
    radial-gradient(ellipse 800px 600px at 25% 20%, var(--color-slate-300), transparent 60%),
    radial-gradient(ellipse 600px 400px at 80% 70%, var(--color-slate-200), transparent 50%),
    radial-gradient(circle 400px at 60% 40%, var(--color-slate-100), transparent 70%),
    linear-gradient(
      135deg,
      var(--color-slate-50) 0%,
      var(--color-slate-100) 40%,
      var(--color-slate-200) 70%,
      var(--color-slate-300) 100%
    ),
    radial-gradient(ellipse 1000px 300px at 50% 100%, var(--color-slate-200), transparent 80%);
  --pos-card-background: var(--color-white);
  color: var(--pos-normal-text-color);
  --pos-error-background-color: var(--color-red-50);
  --pos-error-border-color: var(--color-red-600);

  /* Shoelace overrides */
  --sl-color-primary-600: var(--pos-primary-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    --pos-primary-text-color: var(--color-grey-950);
    --pos-normal-text-color: var(--color-grey-100);
    --pos-secondary-text-color: var(--color-grey-200);
    --pos-subtle-text-color: var(--color-grey-400);
    --pos-disabled-text-color: var(--color-grey-700);
    --pos-primary-color: var(--color-blue-400);
    --pos-primary-highlight-color: var(--color-blue-600);
    --pos-disabled-color: var(--color-slate-800);
    --pos-background-color: var(--color-grey-900);
    --pos-input-background-color: var(--color-slate-700);
    --pos-border-color: var(--color-grey-800);
    --pos-secondary-border-color: var(--color-grey-200);
    --pos-input-outline: var(--size-px) solid var(--color-grey-300);
    --pos-input-focus-outline: var(--size-px) solid var(--pos-primary-color);
    --pos-border-solid: var(--size-px) solid var(--pos-border-color);
    --pos-app-background:
      radial-gradient(ellipse 800px 600px at 25% 20%, var(--color-grey-700), transparent 60%),
      radial-gradient(ellipse 600px 400px at 80% 70%, var(--color-grey-800), transparent 50%),
      radial-gradient(circle 400px at 60% 40%, var(--color-grey-900), transparent 70%),
      linear-gradient(
        135deg,
        var(--color-grey-950) 0%,
        var(--color-grey-900) 40%,
        var(--color-grey-800) 70%,
        var(--color-grey-700) 100%
      ),
      radial-gradient(ellipse 1000px 300px at 50% 100%, var(--color-grey-800), transparent 80%);
    --pos-card-background: var(--color-grey-900);
    --pos-error-background-color: var(--color-red-950);
    --pos-error-border-color: var(--color-red-400);
  }
}