/* colors */
@layer setup {
  :root {
    --ds-black: #000;
    --ds-white: #FFF;
    --ds-primary: oklch(0.7388 0.1792 126.69);
    --ds-support: oklch(0.7388 0.1792 216.69);
    /* http://www.colorbox.io/#steps=11#hue_start=198#hue_end=198#hue_curve=linear#sat_start=15#sat_end=15#sat_curve=linear#sat_rate=130#lum_start=98#lum_end=0#lum_curve=easeOutQuad#lock_hex=eef1f8#minor_steps_map=0 */
    --ds-grey-0: #eef1f8;
    --ds-grey-5: #e9edf6;
    --ds-grey-10: #e4eaf4;
    --ds-grey-20: #dae2ed;
    --ds-grey-30: #cdd7e3;
    --ds-grey-40: #bdc8d4;
    --ds-grey-50: #a8b4c0;
    --ds-grey-60: #8f9ba6;
    --ds-grey-70: #707c84;
    --ds-grey-80: #4d565c;
    --ds-grey-90: #262c2f;
    --ds-grey-100: #000000;

    --ds-color-error: rgb(253, 143, 143);
    --ds-color-warning: #FFFFCC;
    --ds-color-info: rgb(140, 180, 250);
  }
}
@layer base {
  @property --channel {
    syntax: "*";
    inherits: false;
    initial-value: clamp(0, (
      (
        (r * .299) + (g * .587) + (b * .114)
      ) - 128
    ) * -1000, 255);
  }

  :root {
    --ds-primary-10: oklch( from var(--ds-primary) calc(l + 0.3) c h);
    --ds-primary-90: oklch( from var(--ds-primary) calc(l - 0.3) c h);
    --ds-primary-high: var(--ds-primary-90);
    --ds-primary-low: var(--ds-primary-10);
    --ds-primary-contrast: white;

    --ds-support-10: oklch( from var(--ds-support) calc(l + 0.3) c h);
    --ds-support-90: oklch( from var(--ds-support) calc(l - 0.3) c h);
    --ds-support-high: var(--ds-support-90);
    --ds-support-low: var(--ds-support-10);
    --ds-support-contrast: white;

    --ds-link-color: var(--ds-primary-high);
    --ds-link-color-visited: var(--ds-primary);
    --ds-link-color-hover: var(--ds-support);
    --ds-link-color-active: var(--ds-support);

    --ds-grey-high: var(--ds-grey-90);
    --ds-grey-medium: var(--ds-grey-60);
    --ds-grey-low: var(--ds-grey-10);

    --ds-light-color: var(--ds-black);
    --ds-light-color-background: var(--ds-white);

    --ds-dark-color: var(--ds-white);
    --ds-dark-color-background: var(--ds-grey-high);
  }
  
  :root, .ds-lightmode {
    --ds-color: var(--ds-light-color);
    --ds-color-background: var(--ds-light-color-background);
  }
  .ds-darkmode, .ds-dark-background {
    --ds-color: var(--ds-dark-color);
    --ds-color-background: var(--ds-dark-color-background);
    --ds-grey-high: var(--ds-grey-10);
    --ds-grey-medium: var(--ds-grey-60);
    --ds-grey-low: var(--ds-grey-90);
    --ds-support-high: var(--ds-support-10);
    --ds-support-low: var(--ds-support-90);
    --ds-primary-high: var(--ds-primary-10);
    --ds-primary-low: var(--ds-primary-90);
    --ds-link-color: var(--ds-primary-high);
    --ds-link-color-visited: var(--ds-grey-high);
    --ds-link-color-hover: var(--ds-support);
    --ds-link-color-active: var(--ds-support);
  }
  @media (prefers-color-scheme: dark) {
    .ds-darkmode-auto {
      --ds-color: var(--ds-dark-color);
      --ds-color-background: var(--ds-dark-color-background);
      --ds-grey-high: var(--ds-grey-10);
      --ds-grey-medium: var(--ds-grey-60);
      --ds-grey-low: var(--ds-grey-90);
      --ds-support-high: var(--ds-support-10);
      --ds-support-low: var(--ds-support-90);
      --ds-primary-high: var(--ds-primary-10);
      --ds-primary-low: var(--ds-primary-90);
      --ds-link-color: var(--ds-primary-high);
      --ds-link-color-visited: var(--ds-grey-high);
      --ds-link-color-hover: var(--ds-support);
      --ds-link-color-active: var(--ds-support);
    }
  }
  :root, .ds-darkmode, .ds-lightmode, .ds-darkmode-auto {
    --ds-color-contrast: rgb(from var(--ds-color-background) var(--channel) var(--channel) var(--channel));
    --ds-primary-gradient: linear-gradient( to bottom, var(--ds-primary-low), var(--ds-primary-high) );
    --ds-support-gradient: linear-gradient( to bottom, var(--ds-support-low), var(--ds-support-high) );
    color: var(--ds-color-contrast);
    background-color: var(--ds-color-background);
  }
}

@layer base {
  a:link {
    color: var(--ds-link-color);
  }
  a:visited {
    color: var(--ds-link-color-visited);
  }
  a.ds-link-hover,
  a:hover {
    color: var(--ds-link-color-hover);
  }
  a.ds-link-active,
  a:active {
    color: var(--ds-link-color-active);
  }
}

@layer utility {
  .ds-bg-primary, .ds-bg-primary-gradient {
      --ds-color-background: var(--ds-primary);
  }
  .ds-bg-support, .ds-bg-support-gradient {
      --ds-color-background: var(--ds-support);
  }
  .ds-bg-grey-low {
      --ds-color-background: var(--ds-grey-low);
  }
  .ds-bg-grey-medium {
      --ds-color-background: var(--ds-grey-medium);
  }
  .ds-bg-grey-high {
      --ds-color-background: var(--ds-grey-high);
  }
  .ds-bg-black {
      --ds-color-background: var(--ds-black);
  }
  .ds-bg-primary, .ds-bg-primary-gradient, 
  .ds-bg-support, .ds-bg-support-gradient,
  .ds-bg-grey-high, .ds-bg-grey-medium, .ds-bg-grey-low,
  .ds-black, .ds-bg-default {
      --ds-color-contrast: rgb(from var(--ds-color-background) var(--channel) var(--channel) var(--channel));
      background: var(--ds-color-background);
      color: var(--ds-color-contrast);
  }
  .ds-bg-primary-gradient {
      background: var(--ds-primary-gradient);
  }
  .ds-bg-support-gradient {
      background: var(--ds-support-gradient);
  }
  .ds-color-default {
    color: var(--ds-color-contrast);
  }
  .ds-color-primary {
      color: var(--ds-primary);
  }
  .ds-color-primary-high {
      color: var(--ds-primary-high);
  }
  .ds-color-support {
      color: var(--ds-support);
  }
  .ds-color-grey-low {
      color: var(--ds-grey-low);
  }
  .ds-color-grey-medium {
      color: var(--ds-grey-medium);
  }
  .ds-color-grey-high {
      color: var(--ds-grey-high);
  }
}