:root {
  --color-white: #FFF;
  --color-warm-grey: #F2F0EC;
  --color-mid-grey: #D6D3CF;
  --cpag-dark-warm-grey: #D6D3CF;
  --color-light-grey: #E3DFDF;
  --color-grey: #6F6D69;
  --color-black: #271D23;
  --color-deep-purple: #201C40;
  --color-hotpink: #CF0072;
  --color-hotpink-2: #B72B61;
  --color-hotpink-3: #922851;
  --color-yellow: #FFA902;
  --color-yellow-2: #E79A37;
  --color-yellow-3: #DC792F;
  --color-blue: #0F7697;
  --color-green: #00ad83;
  --color-green-2: #42956A;
  --color-green-3: #ccefe6;
  --color-red: #F53F5B;
  --color-orange: #FF6D03;
  --color-secondary-orange: #b54227;
  --color-purple: #C21DAC;
  --color-warm-blue: #6459C4;
  --color-teal: #00B6D1;
  --color-primary: var(--color-hotpink);
  --color-secondary: var(--color-deep-purple);
  --color-base: var(--color-deep-purple);
  --color-text: var(--color-base);
  --color-focus: var(--color-hotpink);
  --color-blockquote-border: var(--color-primary);
  --color-link: var(--color-blue);
  --color-link-hover: var(--color-hotpink);
  --color-list-marker: var(--color-primary);
  --color-form-input-outline: var(--color-black);
  --color-form-input-background: #FFF;
  --color-form-option-active: var(--color-secondary);
  --color-button-bg: var(--color-secondary);
  --color-button-bg-hover: var(--color-yellow);
  --color-button-text: #FFF;
  --color-border: var(--color-primary);
  --color-table-border: var(--color-border);
  --color-page-bg: var(--color-warm-grey);
  --main-nav-bg-color: var(--color-deep-purple);
  --main-nav-link-color: var(--color-white);
  --main-nav-hover-bg-color: var(--color-yellow);
  --main-nav-hover-color: var(--color-deep-purple);
  --accent-1: var(--color-hotpink);
  --accent-2: var(--color-blue);
  --section-nav-link-color: var(--color-hotpink);
  --section-nav-link-color-hover: var(--color-blue);
  --section-nav-icon-filter: invert(17%) sepia(98%) saturate(3073%) hue-rotate(312deg) brightness(84%) contrast(117%);
  --section-nav-icon-filter-hover: invert(28%) sepia(70%) saturate(2023%) hue-rotate(170deg) brightness(91%) contrast(88%);

  --primary-button-bg-color: var(--color-deep-purple);
  --primary-button-text-color: var(--color-white);
  --primary-button-bg-color-hover: var(--color-yellow);
  --primary-button-text-color-hover: var(--color-deep-purple);

  --secondary-button-bg-color: var(--color-yellow);
  --secondary-button-text-color: var(--color-deep-purple);
  --secondary-button-bg-color-hover: var(--color-deep-purple);
  --secondary-button-text-color-hover: var(--color-white);
  --font-brand: 'Poppins', sans-serif;
  --font-base: 'Roboto', sans-serif;
  --font-bold: 600;

  /* --border-radius: 5px; */
  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-spacey: 1.5;
  --list-space: 0.2em;

  /*
  Space
  */
  --gutter: var(--space-s-l, max(1.00rem, min(calc(0.57rem + 2.08vw), 2.50rem)));
  --box-space: var(--space-l);
  --grid-max-width: 92.50rem;
  --grid-columns: 12;
  --autogrid-min-size: 16rem;
  --autogrid-gutter: var(--gutter);
  --container-wide: var(--grid-max-width);
  --container-narrow: max(17.5rem, min(82vw, 77.5rem));
  --container-gutter: max(1rem, min(2vw, 2.5rem));
  --flow-space: var(--space-s);
  --switcher-threshold: 50rem;
  --sidebar-width: max(17.25rem, min(33%, 25rem));
  --sidebar-gutter: var(--space-2xl);
  --cluster-horizontal-alignment: flex-start;
  --cluster-vertical-alignment: center;
  --slat-gap: var(--space-l);
  --paragraph-max-width: 47.5rem;

  /*
  Space
  @link https://utopia.fyi/space/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
  */
  --space-3xs: max(0.25rem, min(calc(0.23rem + 0.09vw), 0.31rem));
  --space-2xs: max(0.50rem, min(calc(0.46rem + 0.17vw), 0.63rem));
  --space-xs: max(0.75rem, min(calc(0.70rem + 0.26vw), 0.94rem));
  --space-s: max(1.00rem, min(calc(0.93rem + 0.35vw), 1.25rem));
  --space-m: max(1.50rem, min(calc(1.39rem + 0.52vw), 1.88rem));
  --space-l: max(2.00rem, min(calc(1.86rem + 0.69vw), 2.50rem));
  --space-xl: max(3.00rem, min(calc(2.79rem + 1.04vw), 3.75rem));
  --space-2xl: max(4.00rem, min(calc(3.72rem + 1.39vw), 5.00rem));
  --space-3xl: max(6.00rem, min(calc(5.57rem + 2.08vw), 7.50rem));

    /* One-up pairs */
  --space-3xs-2xs: max(0.25rem, min(calc(0.14rem + 0.52vw), 0.63rem));
  --space-2xs-xs: max(0.50rem, min(calc(0.38rem + 0.61vw), 0.94rem));
  --space-xs-s: max(0.75rem, min(calc(0.61rem + 0.69vw), 1.25rem));
  --space-s-m: max(1.00rem, min(calc(0.75rem + 1.22vw), 1.88rem));
  --space-m-l: max(1.50rem, min(calc(1.22rem + 1.39vw), 2.50rem));
  --space-l-xl: max(2.00rem, min(calc(1.50rem + 2.43vw), 3.75rem));
  --space-xl-2xl: max(3.00rem, min(calc(2.43rem + 2.78vw), 5.00rem));
  --space-2xl-3xl: max(4.00rem, min(calc(3.00rem + 4.86vw), 7.50rem));

  /* Custom pairs */
  --space-s-l: max(1.00rem, min(calc(0.57rem + 2.08vw), 2.50rem));

  /*
  Type
  @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
  */
  --step--2: max(0.69rem, min(calc(0.66rem + 0.15vw), 0.80rem));
  --step--1: max(0.83rem, min(calc(0.79rem + 0.23vw), 1.00rem));
  --step-0: max(1.00rem, min(calc(0.8rem + 0.35vw), 1.25rem));
  --step-1: max(1.20rem, min(calc(1.10rem + 0.50vw), 1.56rem));
  --step-2: max(1.44rem, min(calc(1.29rem + 0.71vw), 1.95rem));
  --step-3: max(1.73rem, min(calc(1.53rem + 0.99vw), 2.44rem));
  --step-4: max(2.07rem, min(calc(1.80rem + 1.36vw), 3.05rem));
  --step-5: max(2.49rem, min(calc(2.11rem + 1.84vw), 3.82rem));


  /*
   * Components
   */

  --messages-status-bg: var(--color-green-3);
  --messages-status-text: var(--color-deep-purple);
  --messages-status-border: transparent;
  --messages-status-bar: var(--color-green);
  --messages-warning-bg: #fdf8ed;
  --messages-warning-text: #734c00;
  --messages-warning-border: #f4daa6;
  --messages-warning-bar: #e09600;
  --messages-error-bg: #fdd9de;
  --messages-error-text: var(--color-deep-purple);
  --messages-error-border: transparent;
  --messages-error-bar: #f53f5b;
  --tabs-highlight: #0F62FE;
  --table-alignment: left;
  --menu-item-color: #052962;
  --menu-item-hover-color: inherit;
  --footer-background-color: beige;
  --header-background-color: beige;
  --form-input-height: 2.75rem;
}

@media print {
  :root {
    --color-page-bg: transparent;
  }
}

.light {
  --color-foreground: var(--color-text);
  --color-background: #FFFFFF;
}

.dark {
  --color-foreground: #FFFFFF;
  --color-background: var(--color-deep-purple);
}