/* Declare the global cascade order ONCE */
@layer tokens, base, utilities, layout, components-shell, components-ui, components-content, pages;

/* Fonts + Design Tokens */
@layer tokens {
  @font-face {
    font-display: swap;
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    src: url("../libs/google/fonts/roboto-v47-latin-regular.woff2") format("woff2");
  }

  @font-face {
    font-display: swap;
    font-family: Afacad;
    font-style: normal;
    font-weight: 700;
    src: url("../libs/google/fonts/afacad-v1-latin-700.woff2") format("woff2");
  }

  :root {
    --site-width: 1100px;
    --site-padding: calc(8px + 1.5625vw);
    --primary-font: "Afacad";
    --secondary-font: "Roboto";
    --font-style-normal: normal;
    --font-style-italic: italic;
    --dark-color-primary: #000;
    --dark-color-secondary: rgb(33 33 33 / 80%);
    --light-color-primary: #fffff0;
    --light-color-secondary: #bbb;
    --brand-color-primary: #ffbb08;
    --brand-color-secondary: #ff6e15;
    --text-dark-color: var(--dark-color-primary);
    --text-light-color: var(--light-color-secondary);
    --border-dark-color: #212121; 
    --nav-text-color: var(--light-color-primary);
    --nav-text-active-color: var(--brand-color-secondary);
    --button-background-color: var(--brand-color-primary);
    --button-background-hover-color: #b38300;
    --button-text-color: var(--text-dark-color);

    /* responsive typography */
    --h1: clamp(2.44rem, 1.36vw + 2.17rem, 3.26rem);
    --h2: clamp(1.95rem, 0.82vw + 1.79rem, 2.44rem);
    --h3: clamp(1.56rem, 0.45vw + 1.47rem, 1.83rem);
    --h4: clamp(1.25rem, 0.21vw + 1.21rem, 1.38rem);
    --h5: clamp(1rem, 0.05vw + 0.99rem, 1.03rem);
    --h6: clamp(0.8rem, -0.04vw + 0.81rem, 0.77rem);
    --h1-line-height: 1.1;
    --h2-line-height: 1.2;
    --h3-line-height: 1.3;
    --h4-line-height: 1.4;
    --h5-line-height: 1.5;
    --h6-line-height: 1.6;
    --text-xl: clamp(1.27rem, 0.59vw + 1.15rem, 1.62rem);
    --text-l: clamp(1.13rem, 0.37vw + 1.05rem, 1.35rem);
    --text-m: clamp(1rem, 0.21vw + 0.96rem, 1.13rem);
    --text-s: clamp(0.89rem, 0.08vw + 0.87rem, 0.94rem);
    --text-xs: clamp(0.79rem, -0.01vw + 0.79rem, 0.78rem);
    --text-xl-line-height: 1.4;
    --text-l-line-height: 1.5;
    --text-m-line-height: 1.5;
    --text-s-line-height: 1.6;
    --text-xs-line-height: 1.7;
    --transition: all 0.5s ease;
  }
}