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


/* FONT FAMILY */

:root {
  --p-font-family-serif: Minion, serif;
  --p-font-family-sans: system-ui, sans-serif;
  --p-font-family-icon: Iconography;
}


/* FONT SIZE */

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

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

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

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


/* FONT WEIGHT */

:root {
  --p-font-weight-minion-regular: 400;
  --p-font-weight-minion-medium: 500;
  --p-font-weight-minion-semibold: 600;
  --p-font-weight-minion-bold: 700;
  --p-font-weight-iconography-light: 300;
  --p-font-weight-iconography-solid: 700;
}


/* LETTER SPACING */

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


/* LINE HEIGHT */

:root {
  --p-line-height-none: 0;
  --p-line-height-100: 1;
  --p-line-height-110: 1.1;
  --p-line-height-130: 1.3;
  --p-line-height-140: 1.4;
}


/* COLOR */

:root {
  --p-color-content-primary-base: #000000;
  --p-color-content-primary-inverted: #ffffff;
  --p-color-content-gray-strongest: #161616;
  --p-color-content-gray-stronger: #2e2e2e;
  --p-color-content-gray-strong: #464646;
  --p-color-content-gray-medium: #777777;
  --p-color-content-gray-weak: #919191;
  --p-color-content-gray-weaker: #c7c7c7;
  --p-color-content-gray-weakest: #e2e2e2;
  --p-color-content-blue-base: #4285ff;
  --p-color-content-blue-weak: #93bbff;
  --p-color-content-blue-weakest: #e0ebff;
  --p-color-content-pink-base: #ff4181;
  --p-color-content-pink-weak: #ffaebf;
  --p-color-content-pink-weakest: #fffcfc;
  --p-color-background-primary-base: #ffffff;
  --p-color-background-primary-inverted: #000000;
  --p-color-background-gray-strongest: #161616;
  --p-color-background-gray-stronger: #2e2e2e;
  --p-color-background-gray-strong: #464646;
  --p-color-background-gray-medium: #777777;
  --p-color-background-gray-weak: #919191;
  --p-color-background-gray-weaker: #c7c7c7;
  --p-color-background-gray-weakest: #e2e2e2;
  --p-color-background-blue-base: #4285ff;
  --p-color-background-blue-weak: #93bbff;
  --p-color-background-blue-weakest: #e0ebff;
  --p-color-background-pink-base: #ff4181;
  --p-color-background-pink-weak: #ffaebf;
  --p-color-background-pink-weakest: #fffcfc;
}

html.dark {
  --p-color-content-primary-base: #ffffff;
  --p-color-content-primary-inverted: #000000;
  --p-color-content-gray-strongest: #e2e2e2;
  --p-color-content-gray-stronger: #c7c7c7;
  --p-color-content-gray-strong: #ababab;
  --p-color-content-gray-medium: #777777;
  --p-color-content-gray-weak: #5e5e5e;
  --p-color-content-gray-weaker: #464646;
  --p-color-content-gray-weakest: #222222;
  --p-color-content-blue-base: #e0ebff;
  --p-color-content-blue-weak: #93bbff;
  --p-color-content-blue-weakest: #4285ff;
  --p-color-content-pink-base: #fffcfc;
  --p-color-content-pink-weak: #ffaebf;
  --p-color-content-pink-weakest: #ff4181;
  --p-color-background-primary-base: #000000;
  --p-color-background-primary-inverted: #ffffff;
  --p-color-background-gray-strongest: #e2e2e2;
  --p-color-background-gray-stronger: #c7c7c7;
  --p-color-background-gray-strong: #ababab;
  --p-color-background-gray-medium: #777777;
  --p-color-background-gray-weak: #5e5e5e;
  --p-color-background-gray-weaker: #464646;
  --p-color-background-gray-weakest: #222222;
  --p-color-background-blue-base: #e0ebff;
  --p-color-background-blue-weak: #93bbff;
  --p-color-background-blue-weakest: #4285ff;
  --p-color-background-pink-base: #fffcfc;
  --p-color-background-pink-weak: #ffaebf;
  --p-color-background-pink-weakest: #ff4181;
}

:root {
  --p-color-primitive-blue10: #4285ff;
  --p-color-primitive-blue20: #93bbff;
  --p-color-primitive-blue30: #e0ebff;
  --p-color-primitive-black: #000000;
  --p-color-primitive-gray10: #161616;
  --p-color-primitive-gray15: #222222;
  --p-color-primitive-gray20: #2e2e2e;
  --p-color-primitive-gray30: #464646;
  --p-color-primitive-gray40: #5e5e5e;
  --p-color-primitive-gray50: #777777;
  --p-color-primitive-gray60: #919191;
  --p-color-primitive-gray70: #ababab;
  --p-color-primitive-gray80: #c7c7c7;
  --p-color-primitive-gray90: #e2e2e2;
  --p-color-primitive-white: #ffffff;
  --p-color-primitive-pink10: #ff4181;
  --p-color-primitive-pink20: #ffaebf;
  --p-color-primitive-pink30: #fffcfc;
}


/* SIZE */

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

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

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


/* BORDER COLOR */

:root {
  --p-border-color-gray-weaker: var(--p-color-content-gray-weaker);
  --p-border-color-gray-weak: var(--p-color-content-gray-weak);
  --p-border-color-gray-medium: var(--p-color-content-gray-medium);
  --p-border-color-blue: var(--p-color-primitive-blue10);
  --p-border-color-transparent: transparent;
}


/* BORDER RADIUS */

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


/* BORDER STYLE */

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


/* BORDER WIDTH */

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


/* BOX SHADOW */

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


/* BREAKPOINT */

:root {
  --p-breakpoint-layout-minimum: 400px;
  --p-breakpoint-layout-maximum: 2000px;
  --p-breakpoint-screen: 1200px;
}


/* DIMENSIONS */

@media all and (max-width: 599px) {
  :root {
    --p-dimensions-site-logo: 45px;
    --p-dimensions-main-button: 24px;
    --p-dimensions-profile-photo-l: 160px;
    --p-dimensions-profile-photo-m: 120px;
    --p-dimensions-profile-photo-s: 36px;
  }
}

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

@media all and (min-width: 1201px) {
  :root {
    --p-dimensions-site-logo: 54px;
    --p-dimensions-main-button: 24px;
    --p-dimensions-profile-photo-l: 160px;
    --p-dimensions-profile-photo-m: 120px;
    --p-dimensions-profile-photo-s: 36px;
  }
}

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


/* OPACITY */

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