@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));

  /* ── Material Design color tokens (citizen pages) ───────────────────── */
  --primary:                   #006684;
  --on-primary:                #ffffff;
  --primary-container:         #55b9e1;
  --primary-fixed:             #bde9ff;
  --primary-fixed-dim:         #71d2fb;
  --on-primary-fixed:          #001f2a;
  --on-primary-container:      #00475d;

  --md-secondary:              #a4326d;
  --on-md-secondary:           #ffffff;
  --secondary-container:       #fd79b6;
  --secondary-fixed:           #ffd8e5;

  --surface:                   #fbf9f8;
  --surface-variant:           #e4e2e2;
  --surface-container:         #efeded;
  --surface-container-low:     #f5f3f3;
  --surface-container-high:    #eae8e7;
  --surface-container-highest: #e4e2e2;
  --surface-container-lowest:  #ffffff;
  --on-surface:                #1b1c1c;
  --on-surface-variant:        #3e484e;

  --outline:                   #6e797e;
  --outline-variant:           #bec8ce;

  /* ── 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;

  /* ── Civic Vitality 2.0 design tokens (employee dashboard) ──────────── */
  --wels-blue:    #55B9E1;
  --mgmt-pink:    #C9508B;
  --cv-bg:        #FAFAFA;
  --cv-surface:   #FFFFFF;
  --cv-divider:   #ECECEC;
  --cv-hover-row: #F5F8FA;
}