:root {
  --color-primary: oklch(81.3% 0.1668 83.78);
  --color-primary-dark: color-mix(in oklch, var(--color-primary) 92%, black);
  --color-primary-light: color-mix(in oklch, var(--color-primary) 90%, var(--color-on-primary));
  --color-on-primary: oklch(99% 0.02 54.335);
  --color-background: oklch(99.9% 0 75);
  --color-on-background: oklch(21.3% 0 89.876);

  --color-background-light: #eee;
  --color-on-background-light: var(--color-on-background);
  --color-background-dark: #181818;
  --color-on-background-dark: #dbdbdb;

  --color-outline: #ccc;
  --color-outline-subtle: #dbdbdb;

  --color-brand-1: #ffcc05;

  --color-highlight-text: white;
  --color-highlight-bg: #F502B8;
}

:root {
  --border-sm: 1px;
  --border-md: 2px;
  --border-lg: 4px;

  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.6rem;
  --border-radius-lg: 1.2rem;

  --column-lg: 20rem;
}

/***************************************
             Media Queries
****************************************/

:root {
  --max-viewport: 75ch;
  --container-padding: clamp(1.000rem, 15.556vw + -3.667rem, 8.000rem);
}


/***************************************
                Rhyme
****************************************/

:root {
  --rhyme-xxs: clamp(0.702rem, -0.281vw + 0.787rem, 0.576rem);
  --rhyme-xs: clamp(0.790rem, -0.156vw + 0.837rem, 0.720rem);
  --rhyme-sm: clamp(0.889rem, 0.025vw + 0.881rem, 0.900rem);
  --rhyme-base: clamp(1.000rem, 0.278vw + 0.917rem, 1.125rem);
  --rhyme-md: clamp(1.125rem, 0.625vw + 0.938rem, 1.406rem);
  --rhyme-lg: clamp(1.266rem, 1.094vw + 0.938rem, 1.758rem);
  --rhyme-xl: clamp(1.424rem, 1.719vw + 0.908rem, 2.197rem);
  --rhyme-xxl: clamp(1.602rem, 2.544vw + 0.839rem, 2.747rem);
  --rhyme-xxxl: clamp(1.802rem, 3.625vw + 0.715rem, 3.433rem);
}

/***************************************
          Typography
****************************************/

:root {
  --typography-xxs: clamp(0.651rem, 0.9308rem + -0.3443vi, 0.8232rem);
  --typography-xs: clamp(0.7813rem, 0.939rem + -0.1942vi, 0.8784rem);
  --typography-sm: clamp(0.9372rem, 0.937rem + 0.0006vi, 0.9375rem);
  --typography-base: clamp(1rem, 0.9219rem + 0.25vi, 1.125rem);
  --typography-md: clamp(1rem, 0.9219rem + 0.25vi, 1.125rem);
  --typography-lg: clamp(1.067rem, 0.855rem + 0.6785vi, 1.4063rem);
  --typography-xl: clamp(1.1385rem, 0.7514rem + 1.2386vi, 1.7578rem);
  --typography-xxl: clamp(1.2148rem, 0.6007rem + 1.965vi, 2.1973rem);
  --typography-xxxl: clamp(1.2962rem, 0.3896rem + 2.9008vi, 2.7466rem);

  --font-family-body: 'Montserrat', sans-serif;
  --font-family-headings: var(--font-family-body);
  --font-family-navigation: var(--font-family-body);
}

:root {
  --header-height: 72px;
}