/* ── Colors ── */
:root {
  --white:    #ffffff;
  --black:    #000000;
  --red:      #98001B;
  --none:     transparent;
  --blue:     #002E5E;
  --grey-5:   #F5F6F7;
  --grey-10:  #EFF1F3;
  --grey-30:  #94A4B5;
  --grey-60:  #3B5168;
  --dark:     #0D1117;
  --green:    #27AE60;
}

/* ── Fonts ── */
@font-face {
  font-family: 'Bebas Neue';
  src: url('../fonts/BebasNeue-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'Inter', sans-serif;
}

/* ── Typography — Desktop ── */
:root {
  --text-base:      1em;      /* 16px */  --lh-base:      1.5;

  --text-h1:        6.25em;   /* 100px */ --lh-h1:        1;
  --text-h2:        2.5em;    /* 40px */  --lh-h2:        1.2;
  --text-h3:        1.875em;  /* 30px */  --lh-h3:        1.2;

  --text-caption-l: 3.75em;   /* 60px */  --lh-caption-l: 1.1;
  --text-caption-m: 1.625em;  /* 26px */  --lh-caption-m: 1.1;
  --text-caption-s: 1em;      /* 16px */  --lh-caption-s: 1.5;

  --text-body-s:    1em;      /* 16px */  --lh-body-s:    1.5;
}

/* ── Spacing — Desktop ── */
:root {
  --space-wrapper:    4.875em; /* 78px */
  --space-wrapper-bg: 0.75em;  /* 12px */
  --space-container:  8.75em;  /* 140px */
  --space-grid-gap:   1.5em;   /* 24px */
  --space-card-big:   2.5em;   /* 40px */
  --space-card-small: 1.875em; /* 30px */
  --space-input:      1.25em;  /* 20px */
  --space-title-gap:  3.75em;  /* 60px */
}

/* ── Typography — Tablet (max-width: 1024px) ── */
@media (max-width: 1024px) {
  :root {
    --text-h1:        4.375em;  /* 70px  ≈ 70% */
    --text-h2:        2em;      /* 32px  ≈ 80% */
    --text-h3:        1.5em;    /* 24px  ≈ 80% */

    --text-caption-l: 2.5em;   /* 40px  ≈ 67% */
    --text-caption-m: 1.25em;  /* 20px  ≈ 77% */
  }
}

/* ── Spacing — Tablet (max-width: 1024px) ── */
@media (max-width: 1024px) {
  :root {
  }
}

/* ── Typography — Mobile (max-width: 768px) ── */
@media (max-width: 768px) {
  :root {
    --text-h1:        3em;      /* 48px  ≈ 48% */
    --text-h2:        1.75em;   /* 28px  ≈ 70% */
    --text-h3:        1.25em;   /* 20px  ≈ 67% */

    --text-caption-l: 1.875em; /* 30px  ≈ 50% */
    --text-caption-m: 1.125em; /* 18px  ≈ 69% */
  }
}

/* ── Spacing — Mobile (max-width: 768px) ── */
@media (max-width: 768px) {
  :root {
    --space-wrapper: 1.25em; /* 20px */
  }
}