@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;

    --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: #7a2e0e;

    --red-50: #fef3f2;
    --red-100: #fee4e2;
    --red-200: #fecdca;
    --red-300: #fda29b;
    --red-400: #f97066;
    --red-500: #f04438;
    --red-600: #d92d20;
    --red-700: #b42318;
    --red-800: #912018;
    --red-900: #7a271a;

    --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-bold);

    --text-display-lg-font-size: 56px;
    --text-display-lg-line-height: 1.4;
    --text-display-md-font-size: 48px;
    --text-display-md-line-height: 1.4;

    --text-heading-h1-lg-font-size: 40px;
    --text-heading-h1-lg-line-height: 1.5;
    --text-heading-h2-md-font-size: 32px;
    --text-heading-h2-md-font-weight: var(--font-weight-bold);
    --text-heading-h2-md-line-height: 1.5;
    --text-heading-h4-xs-font-size: 24px;
    --text-heading-h4-xs-font-weight: var(--font-weight-semibold);
    --text-heading-h4-xs-line-height: 1.5;
    --text-heading-h5-2xs-font-size: 20px;
    --text-heading-h5-2xs-line-height: 1.5;

    --text-body-lg-font-size: 18px;
    --text-body-lg-line-height: 1.5;
    --text-body-lg-500-font-size: 18px;
    --text-body-md-font-size: 16px;
    --text-body-md-line-height: 1.4;
    --text-body-md-500-font-size: 16px;
    --text-body-sm-font-size: 14px;
    --text-body-sm-line-height: 1.4;
    --text-body-sm-500-font-size: 14px;
    --text-body-sm-500: var(--text-body-sm-500-font-size);
    --text-caption-md-font-size: 12px;
    --text-caption-md-500-font-size: 12px;
    --text-caption-sm-font-size: 10px;

    --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;

    --border-width-1: 1px;
    --border-width-1-5: 1.5px;
    --border-width-2: 2px;
    --border-style-solid: solid;
    --border-radius-4: 4px;
    --border-radius-6: 6px;
    --border-radius-8: 8px;
    --border-radius-10: 10px;
    --border-radius-12: 12px;
    --border-radius-16: 16px;
    --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-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);

    --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-brand-default: var(--blue-sky-600);
    --color-background-brand-secondary: var(--blue-sky-100);

    --color-border-base-default: var(--gray-250);
    --color-border-base-secondary: var(--gray-300);
    --color-border-base-strong: var(--gray-900);
    --color-border-brand-default: var(--blue-sky-600);

    --color-text-base-default: var(--black);
    --color-text-base-secondary: var(--gray-700);
    --color-text-base-inverse-default: var(--white);
    --color-text-brand-default: var(--blue-sky-600);
    --color-text-brand-default-hover: var(--blue-sky-700);
    --color-text-positive-default: var(--green-600);
    --color-text-warning-default: var(--apricot-700);
    --color-text-danger-default: var(--red-600);

    --color-link-primary-default: var(--color-text-brand-default);
    --color-link-primary-hover: var(--color-text-brand-default-hover);
    --color-link-primary-visited: var(--blue-sky-900);
    --color-link-strict-default: var(--color-text-base-default);
    --color-link-strict-hover: var(--gray-700);
    --color-link-white-default: var(--color-text-base-inverse-default);
    --color-text-disabled-default: var(--gray-500);

    --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: rgba(3, 102, 214, 0.12);
    --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-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;
    }
}