// --------------------------------

// (START) Global Editor code https://codyhouse.co/ds/globals/colors

// --------------------------------

:root, [data-theme="default"] {
  // main
  @include defineColorHSL(--color-primary-darker, 220, 89%, 36%);
  @include defineColorHSL(--color-primary-dark, 220, 89%, 46%);
  @include defineColorHSL(--color-primary, 220, 89%, 56%);
  @include defineColorHSL(--color-primary-light, 220, 89%, 66%);
  @include defineColorHSL(--color-primary-lighter, 220, 89%, 76%);

  @include defineColorHSL(--color-accent-darker, 358, 97%, 43%);
  @include defineColorHSL(--color-accent-dark, 358, 97%, 53%);
  @include defineColorHSL(--color-accent, 358, 97%, 63%);
  @include defineColorHSL(--color-accent-light, 358, 97%, 73%);
  @include defineColorHSL(--color-accent-lighter, 358, 97%, 83%);

  @include defineColorHSL(--color-secondary-darker, 197, 73%, 37%);
  @include defineColorHSL(--color-secondary-dark, 197, 73%, 47%);
  @include defineColorHSL(--color-secondary, 197, 73%, 57%);
  @include defineColorHSL(--color-secondary-light, 197, 73%, 67%);
  @include defineColorHSL(--color-secondary-lighter, 197, 73%, 77%);

  @include defineColorHSL(--color-black, 240, 8%, 12%);
  @include defineColorHSL(--color-white, 0, 0%, 100%);

  // feedback
  @include defineColorHSL(--color-warning-darker, 46, 100%, 41%);
  @include defineColorHSL(--color-warning-dark, 46, 100%, 51%);
  @include defineColorHSL(--color-warning, 46, 100%, 61%);
  @include defineColorHSL(--color-warning-light, 46, 100%, 71%);
  @include defineColorHSL(--color-warning-lighter, 46, 100%, 81%);

  @include defineColorHSL(--color-success-darker, 94, 48%, 36%);
  @include defineColorHSL(--color-success-dark, 94, 48%, 46%);
  @include defineColorHSL(--color-success, 94, 48%, 56%);
  @include defineColorHSL(--color-success-light, 94, 48%, 66%);
  @include defineColorHSL(--color-success-lighter, 94, 48%, 76%);

  @include defineColorHSL(--color-error-darker, 358, 97%, 43%);
  @include defineColorHSL(--color-error-dark, 358, 97%, 53%);
  @include defineColorHSL(--color-error, 358, 97%, 63%);
  @include defineColorHSL(--color-error-light, 358, 97%, 73%);
  @include defineColorHSL(--color-error-lighter, 358, 97%, 83%);

  // color contrasts
  @include defineColorHSL(--color-bg, 0, 0%, 100%);
  @include defineColorHSL(--color-contrast-lower, 0, 0%, 95%);
  @include defineColorHSL(--color-contrast-low, 240, 1%, 83%);
  @include defineColorHSL(--color-contrast-medium, 240, 1%, 52%);
  @include defineColorHSL(--color-contrast-high, 240, 4%, 20%);
  @include defineColorHSL(--color-contrast-higher, 240, 8%, 12%);
}

@supports(--css: variables) {
  [data-theme="softGrey"] {
    // main
    @include defineColorHSL(--color-primary-darker, 220, 89%, 36%);
    @include defineColorHSL(--color-primary-dark, 220, 89%, 46%);
    @include defineColorHSL(--color-primary, 220, 89%, 56%);
    @include defineColorHSL(--color-primary-light, 220, 89%, 66%);
    @include defineColorHSL(--color-primary-lighter, 220, 89%, 76%);

    @include defineColorHSL(--color-accent-darker, 358, 97%, 43%);
    @include defineColorHSL(--color-accent-dark, 358, 97%, 53%);
    @include defineColorHSL(--color-accent, 358, 97%, 63%);
    @include defineColorHSL(--color-accent-light, 358, 97%, 73%);
    @include defineColorHSL(--color-accent-lighter, 358, 97%, 83%);

    @include defineColorHSL(--color-secondary-darker, 197, 73%, 37%);
    @include defineColorHSL(--color-secondary-dark, 197, 73%, 47%);
    @include defineColorHSL(--color-secondary, 197, 73%, 57%);
    @include defineColorHSL(--color-secondary-light, 197, 73%, 67%);
    @include defineColorHSL(--color-secondary-lighter, 197, 73%, 77%);

    @include defineColorHSL(--color-black, 240, 8%, 12%);
    @include defineColorHSL(--color-white, 0, 0%, 100%);

    // feedback
    @include defineColorHSL(--color-warning-darker, 46, 100%, 41%);
    @include defineColorHSL(--color-warning-dark, 46, 100%, 51%);
    @include defineColorHSL(--color-warning, 46, 100%, 61%);
    @include defineColorHSL(--color-warning-light, 46, 100%, 71%);
    @include defineColorHSL(--color-warning-lighter, 46, 100%, 81%);

    @include defineColorHSL(--color-success-darker, 94, 48%, 36%);
    @include defineColorHSL(--color-success-dark, 94, 48%, 46%);
    @include defineColorHSL(--color-success, 94, 48%, 56%);
    @include defineColorHSL(--color-success-light, 94, 48%, 66%);
    @include defineColorHSL(--color-success-lighter, 94, 48%, 76%);

    @include defineColorHSL(--color-error-darker, 358, 97%, 43%);
    @include defineColorHSL(--color-error-dark, 358, 97%, 53%);
    @include defineColorHSL(--color-error, 358, 97%, 63%);
    @include defineColorHSL(--color-error-light, 358, 97%, 73%);
    @include defineColorHSL(--color-error-lighter, 358, 97%, 83%);

    // color contrasts
    @include defineColorHSL(--color-bg, 0, 0%, 97%);
    @include defineColorHSL(--color-contrast-lower, 0, 0%, 92%);
    @include defineColorHSL(--color-contrast-low, 240, 1%, 83%);
    @include defineColorHSL(--color-contrast-medium, 240, 1%, 60%);
    @include defineColorHSL(--color-contrast-high, 240, 5%, 20%);
    @include defineColorHSL(--color-contrast-higher, 240, 8%, 12%);
  }
}

@supports(--css: variables) {
  [data-theme="dark"] {
    // main
    @include defineColorHSL(--color-primary-darker, 201, 65%, 42%);
    @include defineColorHSL(--color-primary-dark, 201, 65%, 52%);
    @include defineColorHSL(--color-primary, 201, 65%, 62%);
    @include defineColorHSL(--color-primary-light, 201, 65%, 72%);
    @include defineColorHSL(--color-primary-lighter, 201, 65%, 82%);

    @include defineColorHSL(--color-accent-darker, 358, 97%, 43%);
    @include defineColorHSL(--color-accent-dark, 358, 97%, 53%);
    @include defineColorHSL(--color-accent, 358, 97%, 63%);
    @include defineColorHSL(--color-accent-light, 358, 97%, 73%);
    @include defineColorHSL(--color-accent-lighter, 358, 97%, 83%);

    @include defineColorHSL(--color-secondary-darker, 165, 2%, 24%);
    @include defineColorHSL(--color-secondary-dark, 165, 2%, 34%);
    @include defineColorHSL(--color-secondary, 165, 2%, 44%);
    @include defineColorHSL(--color-secondary-light, 165, 2%, 54%);
    @include defineColorHSL(--color-secondary-lighter, 165, 2%, 64%);

    @include defineColorHSL(--color-black, 240, 8%, 12%);
    @include defineColorHSL(--color-white, 0, 0%, 100%);

    // feedback
    @include defineColorHSL(--color-warning-darker, 46, 100%, 41%);
    @include defineColorHSL(--color-warning-dark, 46, 100%, 51%);
    @include defineColorHSL(--color-warning, 46, 100%, 61%);
    @include defineColorHSL(--color-warning-light, 46, 100%, 71%);
    @include defineColorHSL(--color-warning-lighter, 46, 100%, 81%);

    @include defineColorHSL(--color-success-darker, 94, 48%, 36%);
    @include defineColorHSL(--color-success-dark, 94, 48%, 46%);
    @include defineColorHSL(--color-success, 94, 48%, 56%);
    @include defineColorHSL(--color-success-light, 94, 48%, 66%);
    @include defineColorHSL(--color-success-lighter, 94, 48%, 76%);

    @include defineColorHSL(--color-error-darker, 358, 97%, 43%);
    @include defineColorHSL(--color-error-dark, 358, 97%, 53%);
    @include defineColorHSL(--color-error, 358, 97%, 63%);
    @include defineColorHSL(--color-error-light, 358, 97%, 73%);
    @include defineColorHSL(--color-error-lighter, 358, 97%, 83%);

    // color contrasts
    @include defineColorHSL(--color-bg, 240, 8%, 12%);
    @include defineColorHSL(--color-contrast-lower, 240, 6%, 15%);
    @include defineColorHSL(--color-contrast-low, 252, 4%, 25%);
    @include defineColorHSL(--color-contrast-medium, 240, 1%, 52%);
    @include defineColorHSL(--color-contrast-high, 0, 0%, 89%);
    @include defineColorHSL(--color-contrast-higher, 0, 0%, 100%);

    // font rendering
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@supports(--css: variables) {
  [data-theme="softSecondary"] {
    // main
    @include defineColorHSL(--color-primary-darker, 220, 89%, 36%);
    @include defineColorHSL(--color-primary-dark, 220, 89%, 46%);
    @include defineColorHSL(--color-primary, 220, 89%, 56%);
    @include defineColorHSL(--color-primary-light, 220, 89%, 66%);
    @include defineColorHSL(--color-primary-lighter, 220, 89%, 76%);

    @include defineColorHSL(--color-accent-darker, 358, 97%, 43%);
    @include defineColorHSL(--color-accent-dark, 358, 97%, 53%);
    @include defineColorHSL(--color-accent, 358, 97%, 63%);
    @include defineColorHSL(--color-accent-light, 358, 97%, 73%);
    @include defineColorHSL(--color-accent-lighter, 358, 97%, 83%);

    @include defineColorHSL(--color-secondary-darker, 197, 73%, 37%);
    @include defineColorHSL(--color-secondary-dark, 197, 73%, 47%);
    @include defineColorHSL(--color-secondary, 197, 73%, 57%);
    @include defineColorHSL(--color-secondary-light, 197, 73%, 67%);
    @include defineColorHSL(--color-secondary-lighter, 197, 73%, 77%);

    @include defineColorHSL(--color-black, 240, 8%, 12%);
    @include defineColorHSL(--color-white, 0, 0%, 100%);

    // feedback
    @include defineColorHSL(--color-warning-darker, 46, 100%, 41%);
    @include defineColorHSL(--color-warning-dark, 46, 100%, 51%);
    @include defineColorHSL(--color-warning, 46, 100%, 61%);
    @include defineColorHSL(--color-warning-light, 46, 100%, 71%);
    @include defineColorHSL(--color-warning-lighter, 46, 100%, 81%);

    @include defineColorHSL(--color-success-darker, 94, 48%, 36%);
    @include defineColorHSL(--color-success-dark, 94, 48%, 46%);
    @include defineColorHSL(--color-success, 94, 48%, 56%);
    @include defineColorHSL(--color-success-light, 94, 48%, 66%);
    @include defineColorHSL(--color-success-lighter, 94, 48%, 76%);

    @include defineColorHSL(--color-error-darker, 358, 97%, 43%);
    @include defineColorHSL(--color-error-dark, 358, 97%, 53%);
    @include defineColorHSL(--color-error, 358, 97%, 63%);
    @include defineColorHSL(--color-error-light, 358, 97%, 73%);
    @include defineColorHSL(--color-error-lighter, 358, 97%, 83%);

    // color contrasts
    @include defineColorHSL(--color-bg, 199, 76%, 95%);
    @include defineColorHSL(--color-contrast-lower, 199, 39%, 90%);
    @include defineColorHSL(--color-contrast-low, 202, 15%, 79%);
    @include defineColorHSL(--color-contrast-medium, 210, 5%, 50%);
    @include defineColorHSL(--color-contrast-high, 230, 6%, 20%);
    @include defineColorHSL(--color-contrast-higher, 240, 8%, 12%);
  }
}

// background-color
.bg-secondary { background-color: alpha(var(--color-secondary), var(--bg-o, 1));}

// --------------------------------

// (END) Global Editor Code

// --------------------------------