/*======================
    Root Variables
======================*/
:root {
    /* Fonts */
    --font-family-family: "Inter", sans-serif;

    /* Font Weight */
    --font-weight-medium: 400;
    --font-weight-bold: 700;

    /* Font Size */
    --font-size-input-label: 0.75rem;
    --font-size-caption-1: 1.125rem;
    --font-size-body-2: 1.25rem;
    --font-size-heading-3-platform: 1.25rem;
    --font-size-helper-text: 1.25rem;
    --font-size-button-small: 1.375rem;
    --font-size-body-1: 1.5rem;
    --font-size-button-medium: 1.5rem;
    --font-size-heading-2-platform: 1.5rem;
    --font-size-input-text: 1.5rem;
    --font-size-button-large: 1.625rem;
    --font-size-heading-4-platform: 1.75rem;
    --font-size-heading-4-landing-page: 2rem;
    --font-size-overline: 2rem;
    --font-size-heading-1-platform: 2.125rem;
    --font-size-heading-3-landing-page: 3rem;
    --font-size-heading-2-landing-page: 4rem;
    --font-size-heading-1-landing-page: 5rem;
    --font-size-helper-text: 0.75rem;
    --font-size-input-label: 0.75rem;
    --font-size-overline: 0.75rem;
    --font-size-button-small: 0.8125rem;
    --font-size-body-2: 0.875rem;
    --font-size-button-medium: 0.875rem;
    --font-size-button-large: 0.9375rem;
    --font-size-body-1: 1rem;
    --font-size-input-text: 1rem;

    /* Line height */
    --line-height-heading-1-landing_page: 77px;
    --line-height-heading-3-landing_page: 48px;
    --line-height-heading-4-landing_page: 32px;
    --line-height-body-1: 24px;
    --line-height-heading-3-platform: 20px;
    --line-height-heading-1-platform: 34px;

    /* Letter spacing */
    --letter-spacing-xs: -0.0625rem;
    --letter-spacing-base: 0rem;
    --letter-spacing-sm: 0.0094rem;
    --letter-spacing-md: 0.025rem;
    --letter-spacing-lg: 0.0625rem;
    --letterspacingpegado: -1px;
    --letterspacingepaciado-leve: 0.15px;

    /* Radius */
    --radius-none: 0rem;
    --radius-xs: 0.25rem;
    --radius-main: 1rem;
    --radius-lg: 2.5rem;
    --radius-full: 624.9375rem;

    /* Spacing */
    --spacing-none: 0rem;
    --spacing-2xs: 0.125rem;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 0.75rem;
    --spacing-lg: 1rem;
    --spacing-xl: 1.5rem;
    --spacing-2xl: 2rem;
    --spacing-3xl: 3rem;
    --spacing-4xl: 3.75rem;
    --spacing-5xl: 5rem;
    --spacing-6xl: 7.5rem;

    /* Primitive colors */
    --black-100: #1e120d0d;
    --black-200: #1e120d33;
    --black-300: #1e120d4d;
    --black-400: #1e120d99;
    --black-500: #1e120d;
    --black-600: #1c1e1f;
    --black-700: #0b0605;
    --black-900: #000000;

    --gray-100: #b4ab9e0d;
    --gray-300: #b4ab9e33;
    --gray-400: #b4ab9e66;
    --gray-500: #b4ab9e;
    --gray-600: #887f72;
    --gray-700: #56524d;
    --gray-900: #3b3935;

    --green-100: #4caf500d;
    --green-300: #4caf5033;
    --green-400: #4caf5066;
    --green-500: #4caf50;
    --green-600: #3c8b3f;
    --green-700: #2d672f;
    --green-900: #1d431f;

    --orange-100: #f2a8410d;
    --orange-300: #f2a84133;
    --orange-400: #f2a84166;
    --orange-500: #f2a841;
    --orange-600: #bf750d;
    --orange-700: #8f570a;
    --orange-900: #5f3a07;

    --primary-100: #ffc7000d;
    --primary-300: #ffc70033;
    --primary-400: #ffc70066;
    --primary-500: #ffc700;
    --primary-600: #cc9f00;
    --primary-700: #806300;
    --primary-900: #332800;

    --red-100: #e935350d;
    --red-300: #e9353533;
    --red-400: #e9353566;
    --red-500: #e93535;
    --red-600: #d41717;
    --red-700: #a61212;
    --red-900: #780d0d;

    --secondary-100: #00206e0d;
    --secondary-300: #00206e33;
    --secondary-400: #00206e66;
    --secondary-500: #00206e;
    --secondary-600: #001b5c;
    --secondary-700: #00123d;
    --secondary-900: #00071a;

    --white-100: #ffffff0d;
    --white-300: #ffffff66;
    --white-400: #ffffffcc;
    --white-500: #ffffff;
    --white-600: #fafafa;
    --white-700: #f3f3f3;
    --white-900: #ededed;

    /* Actions */
    --act-fill-bg: var(--primary-500);
    --act-fill-bg-disabled: var(--bg-disabled);
    --act-fill-bg-focused: var(--primary-300);
    --act-fill-bg-hover: var(--primary-400);
    --act-fill-bg-pressed: var(--primary-100);
    --act-fill-border: var(--fg-primary);
    --act-fill-border-disabled: var(--fg-primary-disabled);
    --act-fill-fg: var(--black-500);
    --act-fill-fg-disabled: var(--fg-primary-disabled);
    --act-flat-bg-focused: var(--primary-300);
    --act-flat-bg-hover: var(--primary-100);
    --act-flat-bg-pressed: var(--primary-400);
    --act-flat-fg: var(--black-500);
    --act-flat-fg-disabled: var(--fg-primary-disabled);
    --act-outline-bg: var(--white-100);
    --act-outline-bg-focused: var(--primary-300);
    --act-outline-bg-hover: var(--primary-100);
    --act-outline-bg-pressed: var(--primary-400);
    --act-outline-border: var(--border);
    --act-outline-border-disabled: var(--border-disabled);
    --act-outline-fg: var(--black-500);
    --act-outline-fg-disabled: var(--fg-primary-disabled);
    --act-outline-fg-focused: var(--black-500);
    --act-overdark-bg: var(--white-500);
    --act-overdark-bg-disabled: var(--white-300);
    --act-overdark-bg-focused: var(--white-300);
    --act-overdark-bg-hover: var(--white-400);
    --act-overdark-bg-pressed: var(--white-100);
    --act-overdark-fg: var(--black-500);
    --act-overdark-fg-disabled: var(--fg-primary-disabled);

    /* Backgrounds */
    --bg-app: var(--white-700);
    --bg-brand: var(--primary-500);
    --bg-disabled: var(--black-100);
    --bg-error: var(--red-100);
    --bg-success: var(--green-100);
    --bg-surface-1: var(--white-500);
    --bg-surface-2: var(--white-700);
    --bg-surface-3: var(--black-200);
    --bg-surface-4: var(--black-600);
    --bg-surface-5: var(--black-900);
    --bg-warning: var(--orange-100);

    /* Borders */
    --border: var(--black-200);
    --border-active: var(--primary-500);
    --border-danger: var(--red-500);
    --border-disabled: var(--black-200);
    --border-hover: var(--black-100);
    --border-on-dark: var(--white-400);

    /* Foreground */
    --fg-danger: var(--red-500);
    --fg-inactive: var(--black-400);
    --fg-positive: var(--green-500);
    --fg-primary: var(--black-900);
    --fg-primary-disabled: var(--black-300);
    --fg-primary-disabled-on-dark: var(--white-400);
    --fg-primary-hover: var(--black-100);
    --fg-primary-on-dark: var(--white-500);
    --fg-primary-selected: var(--black-500);
    --fg-secondary: var(--black-400);
    --fg-tertiary: var(--black-300);
    --fg-warning: var(--orange-500);

    /* Overlay */
    --overlay-base: var(--black-300);
    --overlay-dark: var(--black-400);
    --overlay-light: var(--black-200);

    /* Text color */
    --text-brand: var(--primary-500);
    --text-primary: var(--black-500);
    --text-secondary: var(--black-400);
    --text-disabled: var(--black-300);
    --text-positive: var(--green-500);
    --text-warning: var(--orange-500);
    --text-error: var(--red-500);
    --text-brand: var(--primary-500);
    --text-disabled: var(--black-300);
    --text-error: var(--red-500);
    --text-inactive: var(--black-400);
    --text-placeholder: var(--black-400);
    --text-positive: var(--green-500);
    --text-primary: var(--black-500);
    --text-primary-on-dark: var(--white-500);
    --text-secondary: var(--black-400);
    --text-secondary-on-dark: var(--white-400);
    --text-tertiary: var(--black-300);
    --text-tertiary-on-dark: var(--white-300);
    --text-warning: var(--orange-500);

    /* Utility Colors */
    --utility-black: var(--black-500);
    --utility-black-light: var(--black-100);
    --utility-green-dark: var(--green-600);
    --utility-green-light: var(--green-100);
    --utility-orange-dark: var(--orange-600);
    --utility-orange-light: var(--orange-100);
    --utility-primary-dark: var(--primary-500);
    --utility-primary-light: var(--primary-100);
    --utility-red-dark: var(--red-600);
    --utility-red-light: var(--red-100);
    --utility-secondary-dark: var(--secondary-500);
    --utility-secondary-light: var(--secondary-100);
    --utility-white: var(--white-500);
}

/*======================
    Font Faces
======================*/
@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter_18pt-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter_18pt-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}