/* =============================================
   TOKENS — Global
   ============================================= */

@import '../../tokens/dist/css/global.css';


/* =============================================
   TOKENS — Alias
   ============================================= */

@import '../../tokens/dist/css/alias.css';


/* =============================================
   TOKENS — Component
   ============================================= */

@import '../../tokens/dist/css/component.css';


/* =============================================
   FONTS
   ============================================= */

@font-face {
  font-family: 'Inter';
  src: url('../../assets/src/assets/fonts/inter-variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ES Rebond Grotesque';
  src: url('../../assets/src/assets/fonts/es-rebond-grotesque-medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


/* =============================================
   TEXT STYLES
   ============================================= */

.headline-1,
.headline-2,
.headline-3,
.headline-4,
.headline-5,
.headline-6 {
  font-family: var(--lp-alias-typography-headline-font-family);
  font-weight: var(--lp-alias-typography-headline-font-weight);
}

.headline-1 {
  font-size: var(--lp-alias-typography-headline-font-size-1);
  line-height: var(--lp-alias-typography-headline-line-height-1);
}

.headline-2 {
  font-size: var(--lp-alias-typography-headline-font-size-2);
  line-height: var(--lp-alias-typography-headline-line-height-2);
}

.headline-3 {
  font-size: var(--lp-alias-typography-headline-font-size-3);
  line-height: var(--lp-alias-typography-headline-line-height-3);
}

.headline-4 {
  font-size: var(--lp-alias-typography-headline-font-size-4);
  line-height: var(--lp-alias-typography-headline-line-height-4);
}

.headline-5 {
  font-size: var(--lp-alias-typography-headline-font-size-5);
  line-height: var(--lp-alias-typography-headline-line-height-5);
}

.headline-6 {
  font-size: var(--lp-alias-typography-headline-font-size-6);
  line-height: var(--lp-alias-typography-headline-line-height-6);
}

.paragraph-1,
.paragraph-2,
.paragraph-3,
.paragraph-4,
.paragraph-bold-1,
.paragraph-bold-2,
.paragraph-bold-3,
.paragraph-bold-4 {
  font-family: var(--lp-alias-typography-paragraph-font-family);
}

.paragraph-1,
.paragraph-2,
.paragraph-3,
.paragraph-4 {
  font-weight: var(--lp-alias-typography-paragraph-font-weight);
}

.paragraph-bold-1,
.paragraph-bold-2,
.paragraph-bold-3,
.paragraph-bold-4 {
  font-weight: var(--lp-alias-typography-paragraph-font-weight-bold);
}

.paragraph-1,
.paragraph-bold-1 {
  font-size: var(--lp-alias-typography-paragraph-font-size-1);
  line-height: var(--lp-alias-typography-paragraph-line-height-1);
}

.paragraph-2,
.paragraph-bold-2 {
  font-size: var(--lp-alias-typography-paragraph-font-size-2);
  line-height: var(--lp-alias-typography-paragraph-line-height-2);
}

.paragraph-3,
.paragraph-bold-3 {
  font-size: var(--lp-alias-typography-paragraph-font-size-3);
  line-height: var(--lp-alias-typography-paragraph-line-height-3);
}

.paragraph-4,
.paragraph-bold-4 {
  font-size: var(--lp-alias-typography-paragraph-font-size-4);
  line-height: var(--lp-alias-typography-paragraph-line-height-4);
}

.link-1,
.link-2,
.link-3,
.link-4 {
  font-family: var(--lp-alias-typography-link-font-family);
  font-weight: var(--lp-alias-typography-link-font-weight);
}

.link-1 {
  font-size: var(--lp-alias-typography-paragraph-font-size-1);
  line-height: var(--lp-alias-typography-paragraph-line-height-1);
}

.link-2 {
  font-size: var(--lp-alias-typography-paragraph-font-size-2);
  line-height: var(--lp-alias-typography-paragraph-line-height-2);
}

.link-3 {
  font-size: var(--lp-alias-typography-paragraph-font-size-3);
  line-height: var(--lp-alias-typography-paragraph-line-height-3);
}

.link-4 {
  font-size: var(--lp-alias-typography-paragraph-font-size-4);
  line-height: var(--lp-alias-typography-paragraph-line-height-4);
}


/* =============================================
   FOCUS
   ============================================= */

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--lp-alias-color-focus-ring);
  outline-offset: 2px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
  outline: none;
}

button:disabled:focus-visible,
input:disabled:focus-visible,
select:disabled:focus-visible,
textarea:disabled:focus-visible,
[aria-disabled="true"]:focus-visible {
  outline: none;
}

button:active,
a:active,
[role="button"]:active,
label:active,
select:active {
  transition: none;
}