@font-face {
    font-family: Inter;
    src: url(../assets/font/Inter-VariableFont_opsz\,wght.ttf);
}
* {
    margin: 0;
    padding: 0;
    font-family: var(--ff);
}

:root {
  /* ── Brand colours ───────────────────────────────────────────────────── */
  --Green:  #B2C900;
  --Blue:   #55B9E1;
  --Purple: #C9508B;
  --Red:    #E2001A;
  --Yellow: #EAA100;

  --Text:         #000000;
  --lighter-Text: #333333;

  /* ── Foreground / background tokens ─────────────────────────────────── */
  --fwhite: #FFFFFF;
  --fdark:  #1A1A1A;
  --fgrey:  #595959;
  --light:  #F5F5F5;

  /* ── Brand colour family (purple/pink range) ─────────────────────────── */
  --colorLight:  #C9508B;
  --colorMedium: #A83874;
  --colorDark:   #7A1550;

  /* ── Gradients ───────────────────────────────────────────────────────── */
  --gradientMid: linear-gradient(135deg, var(--Blue), var(--Purple));

  /* ── Font family ─────────────────────────────────────────────────────── */
  --ff: 'Inter';

  /* ── Named text-size scale (responsive via clamp) ────────────────────── */
  --xxl: clamp(1.5rem,  3vw,   2.5rem);
  --xl:  clamp(1.2rem,  2vw,   2rem);
  --lg:  clamp(0.95rem, 1.3vw, 1.2rem);
  --md:  clamp(0.875rem,1vw,   1rem);
  --sm:  clamp(0.75rem, 0.9vw, 0.875rem);

  /* ── Page-level font tokens (kept large; used for hero headings) ─────── */
  --font-title:    8rem;
  --font-subtitle: 4rem;
  --font-button:   2rem;
  --font-text:     1rem;
  --font-min:      0.5rem;
}