$white: #fff;
$black: #1D0037;
$dark-purple: #3D1067;
$medium-purple: #68688B;
$blue: #1683B5;

$max-width-xl: 90rem;
$max-width-l: 99.25rem;
$max-width-m: 65.75rem;
$max-width-s: 52rem;
$m-s: calc(1em + 1vw);

:root {
  --color-mode: 'light';
  --white: #fff;
  --black: #1D0037;
  --dark-purple: #3D1067;
  --medium-purple: #68688B;
  --light-purple: #ccbbff;
  --blue: #1683B5;
  --filter-dark: invert(100%) grayscale(100%) brightness(120%);
  --filter-light: none;
  --rainbow-light: linear-gradient(90deg, #4BC0C8 0%, #C779D0 50%, #FEAC5E 100%);
  --rainbow-dark: linear-gradient(90deg, rgba(29,0,55,0.4),  rgba(29,0,55,0.4) 100%), linear-gradient(90deg, #4BC0C8 0%, #C779D0 50%, #FEAC5E 100%);
  --text-third: #1683B5;

  --background: var(--white);
  --text-color: var(--black);
  --text-second: var(--medium-purple);
  --rainbow: var(--rainbow-light);
  --text-white: var(--white);
  --filter: var(--filter-light);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-mode: 'dark';
  }

  :root:not([data-user-color-scheme]) {
    --background: var(--black);
    --text-color: var(--light-purple);
    --text-second: #88a;
    --rainbow: var(--rainbow-dark);
    --text-white: rgba(255,255,255,0.8);
    --filter: var(--filter-dark);

    .intro {
      background-image: url(../img/dark/bg-intro.svg);
    }

    .cta {
      background-image:
        url('../img/dark/quote-top.svg'),
        url('../img/dark/quote-bottom.svg');
    }
    .partner-quote {
      background-image: url('data:image/svg+xml;utf8,
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 135 20">/
        <path fill="%23ccbbff" fill-rule="nonzero" d="M79 0a31 31 0 00-1.4 4c-.3 1-.5 2.2-.5 3.1 0 1.1.2 2 .5 2.9l.8 2.3c.3.7.5 1.6.5 2.6 0 1.3-.5 2.4-1.5 3.3-1 1-2.3 1.4-4 1.4-1.6 0-3-.5-3.9-1.5-1-1-1.4-2.5-1.4-4.4 0-1.3.3-2.7.9-4.4A27.5 27.5 0 0174.9 0H79zM66 0a31 31 0 00-1.5 4C64.2 5 64 6.1 64 7c0 1.1.2 2 .5 2.9l.9 2.3c.3.7.4 1.6.4 2.6 0 1.3-.5 2.4-1.5 3.3-1 1-2.3 1.4-4 1.4-1.6 0-3-.5-3.9-1.5-1-1-1.4-2.5-1.4-4.4 0-1.3.3-2.7.9-4.4a27.5 27.5 0 016-9.3h4zM35 9.6v2H0v-2h35zm100 0v2h-35v-2h35z"/>/
      </svg>');
    }
  }
}

[data-user-color-scheme='dark'] {
  --background: var(--black);
  --text-color: var(--light-purple);
  --text-second: #88a;
  --rainbow: var(--rainbow-dark);
  --text-white: rgba(255,255,255,0.8);
  --filter: var(--filter-dark);

  .intro {
    background-image: url(../img/dark/bg-intro.svg);
  }

  .cta {
    background-image:
      url('../img/dark/quote-top.svg'),
      url('../img/dark/quote-bottom.svg');
  }

  .partner-quote {
    background-image: url('data:image/svg+xml;utf8,
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 135 20">/
      <path fill="%23ccbbff" fill-rule="nonzero" d="M79 0a31 31 0 00-1.4 4c-.3 1-.5 2.2-.5 3.1 0 1.1.2 2 .5 2.9l.8 2.3c.3.7.5 1.6.5 2.6 0 1.3-.5 2.4-1.5 3.3-1 1-2.3 1.4-4 1.4-1.6 0-3-.5-3.9-1.5-1-1-1.4-2.5-1.4-4.4 0-1.3.3-2.7.9-4.4A27.5 27.5 0 0174.9 0H79zM66 0a31 31 0 00-1.5 4C64.2 5 64 6.1 64 7c0 1.1.2 2 .5 2.9l.9 2.3c.3.7.4 1.6.4 2.6 0 1.3-.5 2.4-1.5 3.3-1 1-2.3 1.4-4 1.4-1.6 0-3-.5-3.9-1.5-1-1-1.4-2.5-1.4-4.4 0-1.3.3-2.7.9-4.4a27.5 27.5 0 016-9.3h4zM35 9.6v2H0v-2h35zm100 0v2h-35v-2h35z"/>/
    </svg>');
  }
}