/* Light theme (default) */
:root {
  --bulma-body-family: 'Rubik', sans-serif;
  --bulma-label-color: hsl(200, 45%, 40%);
  --bulma-shadow: none;

  --bulma-primary-h: 204deg;
  --bulma-primary-s: 65%;
  --bulma-primary-l: 53%;
  --bulma-primary: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
  --bulma-primary-invert: white;

  --bulma-link-h: 230deg;
  --bulma-link-s: 56%;
  --bulma-link-l: 53%;
  --bulma-link: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l));

  --bulma-success-h: 152deg;
  --bulma-success-s: 51%;
  --bulma-success-l: 54%;
  --bulma-success: hsl(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l));

  --bulma-info-h: 16deg;
  --bulma-info-s: 100%;
  --bulma-info-l: 52%;
  --bulma-info: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l));
  --bulma-info-invert: white;

  --bulma-warning-h: 44deg;
  --bulma-warning-s: 100%;
  --bulma-warning-l: 73%;
  --bulma-warning: hsl(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-l));
  --bulma-warning-invert: black;

  --bulma-danger-h: 348deg;
  --bulma-danger-s: 82%;
  --bulma-danger-l: 64%;
  --bulma-danger: hsl(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l));
  --bulma-danger-invert: white;

  --bulma-light-h: 0deg;
  --bulma-light-s: 0%;
  --bulma-light-l: 90%;
  --bulma-light: hsl(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-l));

  --bulma-dark-h: 0deg;
  --bulma-dark-s: 0%;
  --bulma-dark-l: 20%;
  --bulma-dark: hsl(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-l));
  --bulma-dark-invert: white;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --bulma-primary-l: 40%;
    /* Darker primary */
    --bulma-primary: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
    --bulma-primary-invert: white;

    --bulma-link-l: 40%;
    /* Darker link */
    --bulma-link: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l));

    --bulma-success-l: 35%;
    /* Darker success */
    --bulma-success: hsl(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l));

    --bulma-info-l: 35%;
    /* Darker info */
    --bulma-info: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l));
    --bulma-info-invert: white;

    --bulma-warning-l: 50%;
    /* More muted warning */
    --bulma-warning: hsl(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-l));
    --bulma-warning-invert: black;

    --bulma-danger-l: 40%;
    /* Darker danger */
    --bulma-danger: hsl(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l));
    --bulma-danger-invert: white;

    --bulma-light-l: 27%;
    /* Darker light for backgrounds */
    --bulma-light: hsl(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-l));

    --bulma-dark-l: 7%;
    /* Even darker dark */
    --bulma-dark: hsl(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-l));
    --bulma-dark-invert: white;
  }
}

/* Force white text */
.is-primary {
  background-color: var(--bulma-primary) !important;
  color: var(--bulma-primary-invert) !important;
}

.is-info {
  background-color: var(--bulma-info) !important;
  color: var(--bulma-info-invert) !important;
}

/* .is-dark {
  background-color: var(--bulma-dark) !important;
  color: var(--bulma-dark-invert) !important;
} */

/* Override is-light tags */
/* Never mind, that didn't look good */
/* .tag.is-light {
  --bulma-tag-background-l: 15%;
  --bulma-tag-color-l: white;
  background-color: hsl(0, 0%, var(--bulma-tag-background-l)) !important;
  color: var(--bulma-tag-color-l) !important;
}

.tag.is-link.is-light {
  --bulma-tag-color-l: white;
  --bulma-tag-background-l: 20%;
  background-color: hsl(0, 0%, var(--bulma-tag-background-l)) !important;
} */