@font-face {
    font-family: "Onest";
    src: url("/fonts/Onest/OnestRegular1602-hint.woff") format("woff"), url("/fonts/Onest/OnestRegular1602-hint.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Onest";
    src: url("/fonts/Onest/OnestMedium1602-hint.woff") format("woff"), url("/fonts/Onest/OnestMedium1602-hint.ttf") format("truetype");
    font-weight: 500 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Onest";
    src: url("/fonts/Onest/OnestBold1602-hint.woff") format("woff"), url("/fonts/Onest/OnestBold1602-hint.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --black: #121212;
    --white: #ffffff;
    --gray-050: #fafafa;
    --gray-100: #f5f5f5;
    --gray-150: #ededed;
    --gray-200: #f1f1f1;
    --gray-250: #d9d9d9;
    --gray-300: #b2b2b2;
    --gray-400: #757575;
    --gray-500: #616161;
    --gray-600: #444444;
    --gray-700: #383838;
    --gray-800: #2c2c2c;
    --gray-900: #1e1e1e;

    --blue-sky-100: #e8f0fb;
    --blue-sky-150: #d6e5f8;
    --blue-sky-200: #ccdef6;
    --blue-sky-300: #99bced;
    --blue-sky-400: #669be4;
    --blue-sky-500: #3379db;
    --blue-sky-600: #0058d2;
    --blue-sky-700: #0046a8;
    --blue-sky-800: #00357e;
    --blue-sky-900: #00295a;

    --lavender-100: #efeafc;
    --lavender-200: #ddd2fa;
    --lavender-300: #bba5f5;
    --lavender-400: #9a79ef;
    --lavender-500: #784cea;
    --lavender-600: #561fe5;
    --lavender-700: #4519b7;
    --lavender-800: #341389;
    --lavender-900: #240c66;

    --purple-100: #efeafc;
    --purple-200: #ddd2fa;
    --purple-300: #cbaffd;
    --purple-400: #b287fb;
    --purple-500: #985ffa;
    --purple-600: #7e37f9;
    --purple-700: #652cc7;
    --purple-800: #4c2195;
    --purple-900: #36166a;

    --magenta-100: #f7eafa;
    --magenta-200: #eed1f5;
    --magenta-300: #dda3eb;
    --magenta-400: #cc74e2;
    --magenta-500: #bb46d8;
    --magenta-600: #aa18ce;
    --magenta-700: #8813a5;
    --magenta-800: #660e7c;
    --magenta-900: #4a095a;

    --forest-green-100: #e8f1f1;
    --forest-green-150: #d6e6e7;
    --forest-green-200: #cce0e1;
    --forest-green-300: #99c1c3;
    --forest-green-400: #66a1a5;
    --forest-green-500: #338287;
    --forest-green-600: #006369;
    --forest-green-700: #004f54;
    --forest-green-800: #003b3f;
    --forest-green-900: #00292c;

    --green-50: #ebf7f1;
    --green-100: #e6f5ee;
    --green-200: #cdeadd;
    --green-300: #9ad6bb;
    --green-400: #68c199;
    --green-500: #35ad77;
    --green-600: #039855;
    --green-700: #027948;
    --green-800: #05603a;
    --green-900: #054f31;

    --apricot-50: #fef5dd;
    --apricot-100: #feefc6;
    --apricot-200: #fedf89;
    --apricot-300: #fec84b;
    --apricot-400: #fdb022;
    --apricot-500: #f79009;
    --apricot-600: #dc6803;
    --apricot-700: #b54708;
    --apricot-800: #93370d;
    --apricot-900: #792e0d;

    --red-50: #feefee;
    --red-100: #fee4e2;
    --red-200: #fecdc9;
    --red-300: #fda19b;
    --red-400: #f97066;
    --red-500: #f04438;
    --red-600: #d92d20;
    --red-700: #b32318;
    --red-800: #912018;
    --red-900: #7a271a;

    --black-100-alpha: rgba(18, 18, 18, 0.05);
    --black-200-alpha: rgba(18, 18, 18, 0.1);
    --black-300-alpha: rgba(18, 18, 18, 0.2);
    --black-400-alpha: rgba(18, 18, 18, 0.4);
    --black-500-alpha: rgba(18, 18, 18, 0.6);
    --white-100-alpha: rgba(255, 255, 255, 0.05);
    --white-200-alpha: rgba(255, 255, 255, 0.1);
    --white-300-alpha: rgba(255, 255, 255, 0.2);
    --white-400-alpha: rgba(255, 255, 255, 0.4);
    --white-500-alpha: rgba(255, 255, 255, 0.6);

    --font-family-base: "Onest", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-family-primary-font: var(--font-family-base);

    --font-weight-regular: 400;
    --font-weight-semibold: 500;
    --font-weight-bold: 600;
    --font-weight-fw-regular: var(--font-weight-regular);
    --font-weight-fw-semibold: var(--font-weight-semibold);

    --text-display-lg-font-family: var(--font-family-base);
    --text-display-md-font-family: var(--font-family-base);
    --text-heading-h1-lg-font-family: var(--font-family-base);
    --text-heading-h2-md-font-family: var(--font-family-base);
    --text-heading-h3-sm-font-family: var(--font-family-base);
    --text-heading-h4-xs-font-family: var(--font-family-base);
    --text-heading-h5-2xs-font-family: var(--font-family-base);
    --text-body-lg-font-family: var(--font-family-base);
    --text-body-lg-500-font-family: var(--font-family-base);
    --text-body-md-font-family: var(--font-family-base);
    --text-body-md-500-font-family: var(--font-family-base);
    --text-body-sm-font-family: var(--font-family-base);
    --text-body-sm-500-font-family: var(--font-family-base);
    --text-caption-md-font-family: var(--font-family-base);
    --text-caption-md-500-font-family: var(--font-family-base);
    --text-caption-sm-font-family: var(--font-family-base);

    --text-display-lg-font-weight: var(--font-weight-bold);
    --text-display-md-font-weight: var(--font-weight-bold);
    --text-heading-h1-lg-font-weight: var(--font-weight-bold);
    --text-heading-h2-md-font-weight: var(--font-weight-bold);
    --text-heading-h3-sm-font-weight: var(--font-weight-bold);
    --text-heading-h4-xs-font-weight: var(--font-weight-semibold);
    --text-heading-h5-2xs-font-weight: var(--font-weight-semibold);
    --text-body-lg-font-weight: var(--font-weight-regular);
    --text-body-lg-500-font-weight: var(--font-weight-semibold);
    --text-body-md-font-weight: var(--font-weight-regular);
    --text-body-md-500-font-weight: var(--font-weight-semibold);
    --text-body-sm-font-weight: var(--font-weight-regular);
    --text-body-sm-500-font-weight: var(--font-weight-semibold);
    --text-caption-md-font-weight: var(--font-weight-regular);
    --text-caption-md-500-font-weight: var(--font-weight-semibold);
    --text-caption-sm-font-weight: var(--font-weight-regular);

    --text-display-lg-font-size: 56px;
    --text-display-lg-line-height: 140%;
    --text-display-lg-letter-spacing: -0.02em;
    --text-display-md-font-size: 48px;
    --text-display-md-line-height: 140%;
    --text-display-md-letter-spacing: -0.02em;

    --text-heading-h1-lg-font-size: 40px;
    --text-heading-h2-md-font-size: 32px;
    --text-heading-h3-sm-font-size: 28px;
    --text-heading-h4-xs-font-size: 24px;
    --text-heading-h5-2xs-font-size: 20px;
    --text-heading-h1-lg-line-height: 150%;
    --text-heading-h2-md-line-height: 150%;
    --text-heading-h3-sm-line-height: 150%;
    --text-heading-h4-xs-line-height: 150%;
    --text-heading-h5-2xs-line-height: 150%;

    --text-body-lg-font-size: 18px;
    --text-body-lg-500-font-size: 18px;
    --text-body-md-font-size: 16px;
    --text-body-md-500-font-size: 16px;
    --text-body-sm-font-size: 14px;
    --text-body-sm-500-font-size: 14px;
    --text-body-lg-line-height: 150%;
    --text-body-md-line-height: 140%;
    --text-body-sm-line-height: 140%;

    --text-caption-md-font-size: 12px;
    --text-caption-md-500-font-size: 12px;
    --text-caption-sm-font-size: 10px;
    --text-caption-md-line-height: 140%;
    --text-caption-sm-line-height: 140%;

    --font-size-14: 14px;
    --font-size-fs-14: 14px;
    --font-size-fs-20: 20px;
    --font-size-fs-24: 24px;
    --font-size-fs-40: 40px;
    --line-height-lh-20: 20px;
    --line-height-lh-28: 28px;
    --line-height-lh-32: 32px;
    --line-height-lh-48: 48px;

    --spacing-0: 0;
    --spacing-2: 2px;
    --spacing-4: 4px;
    --spacing-6: 6px;
    --spacing-8: 8px;
    --spacing-12: 12px;
    --spacing-16: 16px;
    --spacing-20: 20px;
    --spacing-24: 24px;
    --spacing-25: 25px;
    --spacing-32: 32px;
    --spacing-40: 40px;
    --spacing-48: 48px;
    --spacing-56: 56px;
    --spacing-64: 64px;
    --spacing-72: 72px;
    --spacing-80: 80px;
    --spacing-120: 120px;

    --border-width-0: 0;
    --border-width-1: 1px;
    --border-width-1-5: 1.5px;
    --border-width-2: 2px;
    --border-width-3: 3px;
    --border-width-4: 4px;
    --border-width-6: 6px;
    --border-width-8: 8px;

    --border-style-solid: solid;
    --border-style-dashed: dashed;
    --border-style-dotted: dotted;
    --border-style-double: double;
    --border-style-none: none;

    --border-radius-0: 0;
    --border-radius-4: 4px;
    --border-radius-6: 6px;
    --border-radius-8: 8px;
    --border-radius-12: 12px;
    --border-radius-16: 16px;
    --border-radius-32: 32px;
    --border-radius-full: 9999px;
    --radius-12: var(--border-radius-12);
    --radius-full: var(--border-radius-full);

    --drop-shadow-100: 0 0 0.5px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15);
    --drop-shadow-200: 0 0 0.5px rgba(0, 0, 0, 0.18), 0 3px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.08);
    --drop-shadow-300: 0 0 0.5px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.08), 0 5px 12px rgba(0, 0, 0, 0.08);
    --drop-shadow-400: 0 0 0.5px rgba(0, 0, 0, 0.12), 0 10px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.08);
    --drop-shadow-500: 0 0 0.5px rgba(0, 0, 0, 0.08), 0 3px 12px rgba(0, 0, 0, 0.05), 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 5px rgba(0, 0, 0, 0.1);
    --drop-shadow-600: 0 0 0.5px rgba(0, 0, 0, 0.08), 0 3px 12px rgba(0, 0, 0, 0.05), 0 16px 48px rgba(0, 0, 0, 0.14), 0 6px 12px rgba(0, 0, 0, 0.1);

    --motion-duration-md: 0.3s;
    --motion-duration-lg: 0.5s;
    --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
    --motion-scale-sm: 0.9;
    --focus-ring: var(--blue-sky-500);

    --color-background-base-default: var(--white);
    --color-background-base-default-hover: var(--gray-100);
    --color-background-base-default-active: var(--gray-250);
    --color-background-base-secondary: var(--gray-100);
    --color-background-base-secondary-hover: var(--gray-200);
    --color-background-base-secondary-active: var(--gray-250);
    --color-background-base-tertiary: var(--gray-200);
    --color-background-base-tertiary-hover: var(--gray-250);
    --color-background-base-tertiary-active: var(--gray-300);
    --color-background-base-inverse-default: var(--gray-900);
    --color-background-base-inverse-default-hover: var(--gray-700);
    --color-background-base-inverse-default-active: var(--gray-600);
    --color-background-brand-default: var(--blue-sky-600);
    --color-background-brand-default-hover: var(--blue-sky-700);
    --color-background-brand-default-active: var(--blue-sky-800);
    --color-background-brand-secondary: var(--blue-sky-100);
    --color-background-brand-secondary-hover: var(--blue-sky-200);
    --color-background-brand-secondary-active: var(--blue-sky-300);
    --color-background-brand-tertiary: var(--blue-sky-900);
    --color-background-disabled-default: var(--gray-200);
    --color-background-disabled-secondary: var(--gray-250);
    --color-background-positive-default: var(--green-900);
    --color-background-positive-default-hover: var(--green-700);
    --color-background-positive-default-active: var(--green-800);
    --color-background-positive-secondary: var(--green-100);
    --color-background-positive-secondary-active: var(--green-200);
    --color-background-warning-default: var(--apricot-400);
    --color-background-warning-default-hover: var(--apricot-500);
    --color-background-warning-default-active: var(--apricot-600);
    --color-background-warning-secondary: var(--apricot-100);
    --color-background-warning-secondary-active: var(--apricot-200);
    --color-background-warning-accent: var(--apricot-300);
    --color-background-danger-default: var(--red-600);
    --color-background-danger-default-hover: var(--red-700);
    --color-background-danger-default-active: var(--red-800);
    --color-background-danger-secondary: var(--red-100);
    --color-background-danger-secondary-hover: var(--red-200);
    --color-background-danger-secondary-active: var(--red-300);

    --color-border-base-default: var(--gray-250);
    --color-border-base-secondary: var(--gray-300);
    --color-border-base-tertiary: var(--gray-600);
    --color-border-base-strong: var(--gray-900);
    --color-border-brand-default: var(--blue-sky-600);
    --color-border-disabled-default: var(--gray-250);
    --color-border-positive-default: var(--green-700);
    --color-border-warning-default: var(--apricot-600);
    --color-border-danger-default: var(--red-600);

    --color-text-base-default: var(--black);
    --color-text-base-secondary: var(--gray-700);
    --color-text-base-tertiary: var(--gray-400);
    --color-text-base-default-on-color: var(--black);
    --color-text-base-secondary-on-color: var(--gray-600);
    --color-text-base-inverse-default: var(--white);
    --color-text-base-inverse-on-color: var(--white);
    --color-text-brand-default: var(--blue-sky-600);
    --color-text-brand-default-hover: var(--blue-sky-700);
    --color-text-brand-on-secondary: var(--blue-sky-600);
    --color-text-brand-visited: var(--magenta-600);
    --color-text-disabled-default: var(--gray-300);
    --color-text-disabled-on-disabled: var(--gray-300);
    --color-text-positive-default: var(--green-600);
    --color-text-positive-on-secondary: var(--green-700);
    --color-text-warning-default: var(--apricot-700);
    --color-text-warning-on-secondary: var(--apricot-700);
    --color-text-danger-default: var(--red-600);
    --color-text-danger-on-secondary: var(--red-700);

    --color-icon-base-default: var(--black);
    --color-icon-base-secondary: var(--gray-600);
    --color-icon-base-tertiary: var(--gray-400);
    --color-icon-base-default-on-color: var(--black);
    --color-icon-base-secondary-on-color: var(--gray-600);
    --color-icon-base-inverse-default: var(--white);
    --color-icon-base-inverse-on-color: var(--white);
    --color-icon-brand-default: var(--blue-sky-600);
    --color-icon-brand-on-secondary: var(--blue-sky-600);
    --color-icon-brand-visited: var(--magenta-600);
    --color-icon-disabled-default: var(--gray-300);
    --color-icon-disabled-on-disabled: var(--gray-300);
    --color-icon-positive-default: var(--green-600);
    --color-icon-positive-on-secondary: var(--green-700);
    --color-icon-warning-default: var(--apricot-600);
    --color-icon-warning-on-secondary: var(--apricot-700);
    --color-icon-danger-default: var(--red-600);
    --color-icon-danger-on-secondary: var(--red-700);

    --color-link-primary-default: var(--color-text-brand-default);
    --color-link-primary-hover: var(--color-text-brand-default-hover);
    --color-link-primary-visited: var(--color-text-brand-visited);
    --color-link-strict-default: var(--color-text-base-default);
    --color-link-strict-hover: var(--color-text-base-secondary);
    --color-link-white-default: var(--color-text-base-inverse-default);

    --modal-width-sm: 350px;
    --modal-width-md: 590px;
    --modal-width-lg: 720px;
    --modal-width-full: 100vw;
    --z-modal: 1000;

    --select-bg: var(--white);
    --select-border: var(--gray-250);
    --select-radius: var(--border-radius-8);
    --select-padding-x: var(--spacing-12);
    --select-padding-y: var(--spacing-12);
    --select-color: var(--gray-900);
    --select-accent: var(--blue-sky-600);
    --select-shadow: var(--gray-400);
    --select-hover-shadow: var(--gray-300);
    --select-focus-ring: var(--blue-sky-200);
    --select-z: 1010;

    --color-gray-100: var(--gray-100);
    --color-gray-700: var(--gray-700);
    --color-white: var(--white);
    --svg-fill-color: currentColor;
    --apricoty-600: var(--apricot-600);
}

@media (max-width: 768px) {
    :root {
        --text-display-lg-font-size: 48px;
        --text-display-md-font-size: 40px;
        --text-heading-h1-lg-font-size: 32px;
        --text-heading-h2-md-font-size: 28px;
        --text-heading-h3-sm-font-size: 22px;
        --text-heading-h4-xs-font-size: 18px;
        --text-heading-h5-2xs-font-size: 16px;
        --text-body-lg-font-size: 16px;
        --text-body-lg-500-font-size: 16px;
        --text-body-md-font-size: 14px;
        --text-body-md-500-font-size: 14px;
        --text-body-sm-font-size: 12px;
        --text-body-sm-500-font-size: 12px;
        --text-caption-md-font-size: 10px;
        --text-caption-md-500-font-size: 10px;
        --text-caption-sm-font-size: 8px;
    }
}