/* =================================================== */
/* CSS TOKENS */
/* =================================================== */


/* FONT FAMILY */

:root {
  --mev-font-family-sans: Apparat, system-ui, sans-serif;
  --mev-font-family-monospace: ui-monospace, monospace;
  --mev-font-family-icon: Iconography;
}


/* FONT SIZE */

@media all and (max-width: 599px) {
  :root {
    --mev-font-size-display: 32px;
    --mev-font-size-head: 24px;
    --mev-font-size-title: 20px;
    --mev-font-size-subtitle: 16px;
    --mev-font-size-body: 14px;
    --mev-font-size-accent: 14px;
    --mev-font-size-label: 14px;
    --mev-font-size-note: 14px;
    --mev-font-size-button: 12px;
    --mev-font-size-script: 12px;
  }
}

@media all and (min-width: 600px) and (max-width: 1200px) {
  :root {
    --mev-font-size-display: calc(2.40000rem + 1.33333vw);
    --mev-font-size-head: calc(1.60000rem + 1.33333vw);
    --mev-font-size-title: calc(1.60000rem + 0.66667vw);
    --mev-font-size-subtitle: calc(1.20000rem + 0.66667vw);
    --mev-font-size-body: calc(1.00000rem + 0.66667vw);
    --mev-font-size-accent: calc(1.00000rem + 0.66667vw);
    --mev-font-size-label: calc(1.20000rem + 0.33333vw);
    --mev-font-size-note: calc(1.20000rem + 0.33333vw);
    --mev-font-size-button: calc(1.00000rem + 0.33333vw);
    --mev-font-size-script: calc(1.20000rem + 0.00000vw);
  }
}

@media all and (min-width: 1201px) {
  :root {
    --mev-font-size-display: 40px;
    --mev-font-size-head: 32px;
    --mev-font-size-title: 24px;
    --mev-font-size-subtitle: 20px;
    --mev-font-size-body: 18px;
    --mev-font-size-accent: 18px;
    --mev-font-size-label: 16px;
    --mev-font-size-note: 16px;
    --mev-font-size-button: 14px;
    --mev-font-size-script: 12px;
  }
}

:root {
  --mev-font-size-base: 10PX;
  --mev-font-size-base-percentage: 62.5%;
}


/* FONT WEIGHT */

:root {
  --mev-font-weight-apparat-thin: 100;
  --mev-font-weight-apparat-extralight: 200;
  --mev-font-weight-apparat-light: 300;
  --mev-font-weight-apparat-regular: 400;
  --mev-font-weight-apparat-medium: 500;
  --mev-font-weight-apparat-semibold: 600;
  --mev-font-weight-apparat-bold: 700;
}


/* LETTER SPACING */

:root {
  --mev-letter-spacing-base: 0;
  --mev-letter-spacing-bit: 0.08em;
}


/* LINE HEIGHT */

:root {
  --mev-line-height-none: 0;
  --mev-line-height-100: 1;
  --mev-line-height-120: 1.2;
  --mev-line-height-140: 1.4;
}


/* COLOR */

:root {
  --mev-color-content-primary-base: #000000;
  --mev-color-content-primary-inverted: #ffffff;
  --mev-color-content-red-base: #ea643d;
  --mev-color-content-green-base: #2a8f00;
  --mev-color-content-gray-strongest: #2e2e2e;
  --mev-color-content-gray-strong: #5e5e5e;
  --mev-color-content-gray-medium: #919191;
  --mev-color-content-gray-weak: #c7c7c7;
  --mev-color-content-gray-weakest: #e2e2e2;
  --mev-color-background-primary-base: #ffffff;
  --mev-color-background-primary-inverted: #000000;
  --mev-color-background-gray-strongest: #2e2e2e;
  --mev-color-background-gray-strong: #5e5e5e;
  --mev-color-background-gray-medium: #919191;
  --mev-color-background-gray-weak: #c7c7c7;
  --mev-color-background-gray-weakest: #e2e2e2;
  --mev-color-background-red-base: #ea643d;
  --mev-color-background-red-weak: #f68969;
  --mev-color-background-red-weakest: #fddacf;
  --mev-color-background-green-base: #2a8f00;
  --mev-color-background-green-weak: #40cd00;
  --mev-color-background-green-weakest: #9fff8a;
}

html.dark {
  --mev-color-content-primary-base: #ffffff;
  --mev-color-content-primary-inverted: #000000;
  --mev-color-content-red-base: #f68969;
  --mev-color-content-green-base: #40cd00;
  --mev-color-content-gray-strongest: #e2e2e2;
  --mev-color-content-gray-strong: #c7c7c7;
  --mev-color-content-gray-medium: #919191;
  --mev-color-content-gray-weak: #5e5e5e;
  --mev-color-content-gray-weakest: #2e2e2e;
  --mev-color-background-primary-base: #000000;
  --mev-color-background-primary-inverted: #ffffff;
  --mev-color-background-gray-strongest: #e2e2e2;
  --mev-color-background-gray-strong: #c7c7c7;
  --mev-color-background-gray-medium: #919191;
  --mev-color-background-gray-weak: #5e5e5e;
  --mev-color-background-gray-weakest: #2e2e2e;
  --mev-color-background-red-base: #fddacf;
  --mev-color-background-red-weak: #f68969;
  --mev-color-background-red-weakest: #ea643d;
  --mev-color-background-green-base: #9fff8a;
  --mev-color-background-green-weak: #40cd00;
  --mev-color-background-green-weakest: #2a8f00;
}

:root {
  --mev-color-primitive-black: #000000;
  --mev-color-primitive-gray20: #2e2e2e;
  --mev-color-primitive-gray40: #5e5e5e;
  --mev-color-primitive-gray60: #919191;
  --mev-color-primitive-gray80: #c7c7c7;
  --mev-color-primitive-gray90: #e2e2e2;
  --mev-color-primitive-white: #ffffff;
  --mev-color-primitive-red50: #ea643d;
  --mev-color-primitive-red70: #f68969;
  --mev-color-primitive-red90: #fddacf;
  --mev-color-primitive-green50: #2a8f00;
  --mev-color-primitive-green70: #40cd00;
  --mev-color-primitive-green90: #9fff8a;
}


/* SIZE */

@media all and (max-width: 599px) {
  :root {
    --mev-size-050x050: 4px;
    --mev-size-050x075: 4px;
    --mev-size-075x100: 6px;
    --mev-size-075x125: 6px;
    --mev-size-100x150: 8px;
    --mev-size-125x175: 10px;
    --mev-size-150x200: 12px;
    --mev-size-175x225: 14px;
    --mev-size-200x250: 16px;
    --mev-size-250x300: 20px;
    --mev-size-300x400: 24px;
    --mev-size-400x500: 32px;
    --mev-size-500x600: 40px;
    --mev-size-200x600: 16px;
    --mev-size-600x800: 48px;
  }
}

@media all and (min-width: 600px) and (max-width: 1200px) {
  :root {
    --mev-size-050x050: calc(0.40000rem + 0.00000vw);
    --mev-size-050x075: calc(0.20000rem + 0.33333vw);
    --mev-size-075x100: calc(0.40000rem + 0.33333vw);
    --mev-size-075x125: calc(0.20000rem + 0.66667vw);
    --mev-size-100x150: calc(0.40000rem + 0.66667vw);
    --mev-size-125x175: calc(0.60000rem + 0.66667vw);
    --mev-size-150x200: calc(0.80000rem + 0.66667vw);
    --mev-size-175x225: calc(1.00000rem + 0.66667vw);
    --mev-size-200x250: calc(1.20000rem + 0.66667vw);
    --mev-size-250x300: calc(1.60000rem + 0.66667vw);
    --mev-size-300x400: calc(1.60000rem + 1.33333vw);
    --mev-size-400x500: calc(2.40000rem + 1.33333vw);
    --mev-size-500x600: calc(3.20000rem + 1.33333vw);
    --mev-size-200x600: calc(-1.60000rem + 5.33333vw);
    --mev-size-600x800: calc(3.20000rem + 2.66667vw);
  }
}

@media all and (min-width: 1201px) {
  :root {
    --mev-size-050x050: 4px;
    --mev-size-050x075: 6px;
    --mev-size-075x100: 8px;
    --mev-size-075x125: 10px;
    --mev-size-100x150: 12px;
    --mev-size-125x175: 14px;
    --mev-size-150x200: 16px;
    --mev-size-175x225: 18px;
    --mev-size-200x250: 20px;
    --mev-size-250x300: 24px;
    --mev-size-300x400: 32px;
    --mev-size-400x500: 40px;
    --mev-size-500x600: 48px;
    --mev-size-200x600: 48px;
    --mev-size-600x800: 64px;
  }
}


/* BORDER COLOR */

:root {
  --mev-border-color-gray-weak: var(--mev-color-content-gray-weak);
  --mev-border-color-gray-medium: var(--mev-color-content-gray-medium);
  --mev-border-color-red: var(--mev-color-primitive-red50);
  --mev-border-color-transparent: transparent;
}


/* BORDER RADIUS */

:root {
  --mev-border-radius-two: 2px;
  --mev-border-radius-four: 4px;
  --mev-border-radius-eight: 8px;
  --mev-border-radius-twelve: 12px;
  --mev-border-radius-full: calc(infinity * 1px);
  --mev-border-radius-circle: 50%;
}


/* BORDER STYLE */

:root {
  --mev-border-style-solid: solid;
  --mev-border-style-dashed: dashed;
}


/* BORDER WIDTH */

:root {
  --mev-border-width-base: min(1PX, 0.1rem);
  --mev-border-width-thick: clamp(1px, calc(1px + (100vw - 600px) / 600), 2px);
  --mev-border-width-brand: var(--mev-size-050x075);
}


/* BOX SHADOW */

:root {
  --mev-box-shadow-eight: 0px 2px 8px 0px color-mix(in srgb, var(--mev-color-content-primary-base) calc(var(--mev-opacity-25) * 100%), transparent calc(100% - calc(var(--mev-opacity-25) * 100%)));
  --mev-box-shadow-twelve: 0px 4px 12px 0px color-mix(in srgb, var(--mev-color-content-primary-base) calc(var(--mev-opacity-25) * 100%), transparent calc(100% - calc(var(--mev-opacity-25) * 100%)));
}


/* BREAKPOINT */

:root {
  --mev-breakpoint-layout-minimum: 300px;
  --mev-breakpoint-layout-maximum: 1800px;
  --mev-breakpoint-columns-one-to-two: 600px;
}


/* DIMENSIONS */

@media all and (max-width: 599px) {
  :root {
    --mev-dimensions-site-logo: 34px;
    --mev-dimensions-profile-photo-l: 160px;
    --mev-dimensions-profile-photo-m: 120px;
    --mev-dimensions-profile-photo-s: 36px;
  }
}

@media all and (min-width: 600px) and (max-width: 1200px) {
  :root {
    --mev-dimensions-site-logo: calc(-0.20000rem + 6.00000vw);
    --mev-dimensions-profile-photo-l: calc(16.00000rem + 0.00000vw);
    --mev-dimensions-profile-photo-m: calc(12.00000rem + 0.00000vw);
    --mev-dimensions-profile-photo-s: calc(3.60000rem + 0.00000vw);
  }
}

@media all and (min-width: 1201px) {
  :root {
    --mev-dimensions-site-logo: 70px;
    --mev-dimensions-profile-photo-l: 160px;
    --mev-dimensions-profile-photo-m: 120px;
    --mev-dimensions-profile-photo-s: 36px;
  }
}

:root {
  --mev-dimensions-check-input: 16px;
  --mev-dimensions-toggle-thumb: 0.8333333333em;
}


/* OPACITY */

:root {
  --mev-opacity-75: 0.75;
  --mev-opacity-50: 0.5;
  --mev-opacity-25: 0.25;
  --mev-opacity-10: 0.1;
}