@layer core, third-party, components, utility;
@layer core.reset, core.tokens, core.base;
@layer third-party.imports, third-party.overrides;
@layer components.base, components.variations;

/* stylelint-disable */
@layer core.reset {
  *,
  *::after,
  *::before {
    box-sizing: border-box;
  }

  :focus {
    outline: none;
  }

  :focus-visible {
    outline: 2px auto Highlight;
    outline: 2px auto -webkit-focus-ring-color;
    outline-offset: 2px;
  }

  :where(html) {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    line-height: 1.5;
    scrollbar-gutter: stable;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    tab-size: 4;
    -moz-tab-size: 4;
  }

  :where(html, body) {
    margin: 0;
    padding: 0;
    min-height: 100%;
  }

  :where(h1) {
    font-size: 2em;
    margin-block: 0.67em;
  }

  :where(abbr[title]) {
    cursor: help;
    text-decoration-line: underline;
    text-decoration-style: dotted;
  }

  @media (forced-colors: active) {
    mark {
      color: HighlightText;
      background-color: Highlight;
    }
  }

  :where(audio, iframe, img, svg, video) {
    max-block-size: 100%;
    max-inline-size: 100%;
  }

  :where(fieldset) {
    min-inline-size: 0;
  }

  :where(label):has(+ :where(textarea, input, select)) {
    display: block;
  }

  :where(textarea:not([rows])) {
    min-block-size: 6em;
  }

  :where(button, input, select, textarea) {
    font-family: inherit;
    font-size: inherit;
  }

  :where(textarea) {
    resize: vertical;
  }

  :where([role="button"], details[open] summary, summary) {
    user-select: none;
  }

  :where([type="search"]) {
    -webkit-appearance: textfield;
  }

  /* iOS only */
  @supports (-webkit-touch-callout: none) {
    :where([type="search"]) {
      border: 1px solid -apple-system-secondary-label;
      background-color: canvas;
    }
  }

  :where([type="tel"], [type="url"], [type="email"], [type="number"]):not(
      :placeholder-shown
    ) {
    direction: ltr;
  }

  :where(table) {
    border-collapse: collapse;
    border: 1px solid;
  }

  :where(th, td) {
    border: 1px solid;
    padding: 0.25em 0.5em;
  }

  :where(dialog)::backdrop {
    background: oklch(0% 0 0 / 0.3);
  }

  :where(dialog),
  :where(dialog)::backdrop {
    opacity: 0;
    transition: opacity 300ms ease-out, display 300ms allow-discrete,
      overlay 300ms allow-discrete;
  }

  :where(dialog[open]),
  :where(dialog[open])::backdrop {
    opacity: 1;
  }

  @starting-style {
    :where(dialog[open]),
    :where(dialog[open])::backdrop {
      opacity: 0;
    }
  }

  [hidden]:not([hidden="until-found"]) {
    display: none !important;
  }

  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0s !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: 0s !important;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    :root {
      scroll-behavior: smooth;
    }
  }
}
/* stylelint-enable */

@layer core.tokens {
  :root {
    /* Colors */
    --color-cyan-100: #00a4e0;
    --color-cyan-dark: #0078bb;
    --color-cyan-active: #008bca;
    --color-darkblue-100: #00327d;
    --color-darkblue-70: #4d70a4;
    --color-darkblue-active: #0d358c;
    --color-white: #fff;
    --color-black: #000;
    --gradient-css-100:
      linear-gradient(
        135deg,
        var(--color-darkblue-100) 20%,
        var(--color-cyan-dark) 70%,
        var(--color-cyan-100) 100%
      );
    --gradient-css-90:
      linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-darkblue-100) 90%, transparent) 20%,
        color-mix(in srgb, var(--color-cyan-dark) 90%, transparent) 70%,
        color-mix(in srgb, var(--color-cyan-100) 90%, transparent) 100%
      );
    --color-lavender-dark: #462564;
    --color-lavender-bright: #9b50c8;
    --color-sumac-dark: #a40664;
    --color-sumac-bright: #f03a76; /* #ff548c */
    --color-basil-dark: #009467;
    --color-basil-dark-50: #80cab3;
    --color-basil-dark-20: #cceae1;
    --color-basil-bright: #00e09d;
    --color-pepper-dark: #dededc;
    --color-pepper-medium: #f2f2ed;
    --color-pepper-bright: #f7f7f4;
    --color-red: #d53419;
    --color-yellow: #ffc015;
    --color-green: #0e8411;

    /* Spacing */
    --spacer-xxxs: 0.25rem;
    --spacer-xxs: 0.5rem;
    --spacer-xs: 1rem;
    --spacer-s: clamp(1.25rem, 1.162rem + 0.3756vw, 1.5rem);
    --spacer-m: clamp(1.5rem, 1.2359rem + 1.1268vw, 2.25rem);
    --spacer-l: clamp(2.25rem, 1.9859rem + 1.1268vw, 3rem);
    --spacer-xl: clamp(3rem, 2.6479rem + 1.5023vw, 4rem);
    --spacer-xxl: clamp(4rem, 3.2958rem + 3.0047vw, 6rem);
    --spacer-xxxl: clamp(6rem, 5.1197rem + 3.7559vw, 8.5rem);

    /* radius */
    --radius-s: 0.125rem;
    --radius-m: 0.25rem;
    --radius-l: 0.5rem;

    /* Font family */
    --font-family-museo-sans: "MuseoSans", "MuseoSans Fallback", sans-serif;
    --font-family-monospace: ui-monospace, "Cascadia Code", "Source Code Pro", "Menlo", "Consolas", "DejaVu Sans Mono", monospace;

    /* Font size */
    --font-size-title-1: clamp(2.5rem, 1.6197rem + 3.7559vw, 5rem);
    --font-size-title-2: clamp(2rem, 1.2958rem + 3.0047vw, 4rem);
    --font-size-title-3: clamp(1.5rem, 1.3239rem + 0.7512vw, 2rem);
    --font-size-text-1: clamp(1.13rem, 0.993rem + 0.5634vw, 1.5rem);
    --font-size-text-2: clamp(1rem, 0.956rem + 0.1878vw, 1.13rem);
    --font-size-text-3: 0.875rem;
    --font-size-text-4: 0.75rem;
    --font-size-disruptor: clamp(1rem, 0.376vw + 0.912rem, 1.25rem);
    --font-size-button: 0.875rem;

    /* Grid size */
    --grid-offset: clamp(1.5rem, -0.7887rem + 9.7653vw, 8rem);
    --grid-inner-max-width: 30rem;
    --grid-inner-max-width-narrow: 30rem;

    @media (width >= 64em) {
      --grid-inner-max-width: 74rem;
      --grid-inner-max-width-narrow: 55.5rem;
    }

    /* Header */
    --header-logo-size: clamp(1.63rem, 1.3169rem + 1.3146vw, 2.5rem);
    --header-padding-block: clamp(0.88rem, 0.3028rem + 2.4413vw, 2.5rem);

    /* Button */
    --button-height: 4rem;

    /* Disruptor */
    --disruptor-diameter: clamp(7.5rem, 6.6197rem + 3.7559vw, 10rem);

    /* Block spacing */
    --block-spacing: clamp(3rem, 1.2394rem + 7.5117vw, 8rem) var(--grid-offset);

    /* Icons */
    --icon-checkmark: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 33L27 44L48 22' fill='none' stroke='currentcolor' stroke-width='2'/%3E%3Cpath d='M32 62C48.5685 62 62 48.5685 62 32C62 15.4315 48.5685 2 32 2C15.4315 2 2 15.4315 2 32C2 48.5685 15.4315 62 32 62Z' fill='none' stroke='currentcolor' stroke-width='2'/%3E%3C/svg%3E%0A");
    --icon-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' %3E%3Cpath d='M16.2 25.64c0 1.67-.67 3.12-2.02 4.37a6.65 6.65 0 0 1-4.72 1.88c-2.86 0-5.06-.95-6.6-2.85-1.53-1.9-2.3-4.53-2.3-7.88 0-3.12 1.32-6.27 3.94-9.44a25.96 25.96 0 0 1 9.56-7.22l1.72 2.77a21.61 21.61 0 0 0-6.9 5 11.92 11.92 0 0 0-2.9 6.9h2.19c1.61 0 2.93.18 3.94.54 1.01.37 1.83.88 2.46 1.53a5.2 5.2 0 0 1 1.25 2.06c.26.76.39 1.54.39 2.34Zm19.24 0c0 1.67-.68 3.12-2.03 4.37a6.65 6.65 0 0 1-4.72 1.88c-2.86 0-5.06-.95-6.6-2.85-1.53-1.9-2.3-4.53-2.3-7.88 0-3.12 1.32-6.27 3.94-9.44A25.96 25.96 0 0 1 33.3 4.5l1.72 2.77a21.61 21.61 0 0 0-6.9 5 11.92 11.92 0 0 0-2.9 6.9h2.2c1.6 0 2.92.18 3.93.54 1.02.37 1.83.88 2.46 1.53a5.2 5.2 0 0 1 1.25 2.06c.26.76.39 1.54.39 2.34Z'/%3E%3C/svg%3E");
  }
}

@layer core.base {
  /* page layout */

  html {
    background-color: var(--color-white);
    color: var(--color-black);
  }

  body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  main {
    flex: 1;
  }

  header {
    min-height: calc(var(--header-logo-size) + (2 * var(--header-padding-block)));
  }

  /* typography */

  /* stylelint-disable-next-line no-duplicate-selectors */
  body {
    font-family: var(--font-family-museo-sans);
    font-size: var(--font-size-text-1);
    font-weight: 300;
    line-height: 1.5;
  }

  code,
  kbd,
  samp {
    font-family: var(--font-family-monospace);
  }

  :where(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, pre) {
    margin: 0;
    padding: 0;
  }

  :where(h1, .title-1) {
    font-size: var(--font-size-title-1);
    font-weight: 700;
    line-height: 1.2;
  }

  :where(h2, .title-2) {
    font-size: var(--font-size-title-2);
    font-weight: 700;
    line-height: 1.3;
  }

  :where(h3, .title-3) {
    font-size: var(--font-size-title-3);
    font-weight: 700;
    line-height: 1.4;
  }

  strong {
    font-weight: 700;
  }

  /* icons */

  .icon {
    display: inline-block;

    &:not(.icon-logo) {
      line-height: 1;
      width: 1rem;
      height: 1rem;
      fill: none;
      stroke: currentcolor;
      stroke-width: 0.375rem;
    }

    &.icon-logo {
      aspect-ratio: 57 / 24;
      fill: currentcolor;
    }
  }

  /* links */

  a:any-link {
    display: inline-flex;
    color: var(--color-darkblue-70);
    text-decoration: none;
    transition: color 0.2s ease-in-out;

    &:hover,
    &:focus {
      color: var(--color-darkblue-100);
    }

    &:disabled,
    &[disabled] {
      opacity: 0.4;
    }
  }

  /* theme */

  [data-theme="sumac"] {
    --color-theme: var(--color-sumac-bright);
    --color-theme-contrast: var(--color-white);
    --button-secondary-color: var(--color-theme-contrast);
    --button-secondary-background-color-hover: var(--color-darkblue-100);
    --disruptor-background-color: var(--color-white);
    --disruptor-color: var(--color-theme);
  }

  [data-theme="basil"] {
    --color-theme: var(--color-basil-bright);
    --color-theme-contrast: var(--color-darkblue-100);
    --disruptor-background-color: var(--color-white);
    --disruptor-color: var(--color-theme-contrast);
  }

  [data-theme="lavender"] {
    --color-theme: var(--color-lavender-bright);
    --color-theme-contrast: var(--color-white);
    --button-secondary-color: var(--color-theme-contrast);
    --button-secondary-background-color-hover: var(--color-darkblue-100);
    --disruptor-background-color: var(--color-white);
    --disruptor-color: var(--color-theme);
  }

  [data-theme="pepper"] {
    --color-theme: var(--color-pepper-bright);
    --color-theme-contrast: var(--color-darkblue-100);
  }

  [data-theme="white"] {
    --color-theme: var(--color-white);
    --color-theme-contrast: var(--color-darkblue-100);
  }

  [data-theme] {
    background-color: var(--color-theme);
    color: var(--color-theme-contrast);
  }
}

@layer components.base {
  /* buttons */

  .button-container {
    display: inline-flex;
    line-height: 1;
  }

  /* only stlye as button when its explicitly defined which button */
  .button {
    &.button-primary,
    &.button-secondary,
    &.button-invert {
      height: var(--button-height);
      display: inline-flex;
      justify-content: center;
      align-items: center;
      gap: var(--spacer-xs);
      cursor: pointer;
      border: 1px solid transparent;
      border-radius: 2rem;
      padding: 0 2.25rem;
      text-decoration: none;
      font-size: var(--font-size-button);
      font-weight: 500;
      letter-spacing: 1px;
      text-transform: uppercase;
      transition:
        color 0.2s ease-in-out,
        border-color 0.2s ease-in-out,
        background-color 0.2s ease-in-out;

      &:disabled,
      &[disabled] {
        opacity: 0.4;
      }

      &.button-primary {
        background-color: var(--color-darkblue-100);
        color: var(--color-white);

        &:hover,
        &:focus {
          background-color: var(--color-cyan-dark);
        }
      }

      &.button-secondary {
        background-color: transparent;
        color: var(--button-secondary-color, var(--color-darkblue-100));
        border-color: currentcolor;

        &:hover,
        &:focus {
          background-color: var(--button-secondary-background-color-hover, var(--color-cyan-dark));
          color: var(--color-white);
          border-color: transparent;
        }
      }
    }

    &.button-invert {
      background-color: var(--color-white);
      color: var(--color-darkblue-100);

      &:hover,
      &:focus {
        background-color: var(--color-cyan-dark);
        color: var(--color-white);
      }
    }
  }

  /* disruptor */

  .disruptor {
    --background-color: var(--disruptor-background-color, var(--color-sumac-bright));
    --color: var(--disruptor-color, var(--color-white));

    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--disruptor-diameter);
    width: var(--disruptor-diameter);
    font-size: var(--font-size-disruptor);
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    border-radius: 50%;
    padding: 1.25rem;
    background-color: var(--background-color);
    color: var(--color);

    &.disruptor-text {
      transform: rotate(-8deg);
    }

    &.disruptor-icon {
      .icon {
        stroke-width: 0.1875rem;
        height: clamp(3.38rem, 2.9789rem + 1.6901vw, 4.5rem);
        width: clamp(3.38rem, 2.9789rem + 1.6901vw, 4.5rem);
      }
    }
  }
}

@layer utility {
  [data-role="footer"] {
    display: none;
  }

  [data-role="navigation"] {
    display: none;
  }

  .sr-only {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
}