:root {
  /* ===== BREAKPOINTS ===== */
  --breakpoint-sm: 600px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;

  /* ===== TYPOGRAPHY Base font size: 16px = 1rem ===== */
  --font-size-base: 0.875rem; /* 14px adaptable: clamp(14px, 1.5vw, 16px); */
  --font-size-sm: 0.8125rem;  /* 13px */
  --font-size-md: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.375rem;   /* 22px */
  --font-size-xxl: 1.75rem;   /* 28px */

  --line-height-base: 1.5; 
  --font-family: 'Roboto', 'Noto', 'Arial', sans-serif;

  /* ===== TYPOGRAPHY FONT WEIGHTS ===== */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-semibold: 500;
  --fw-bold: 600;

  /* ===== TYPOGRAPHY FONT SIZES ===== */
  --fs-h1: 1.5rem;   /* 24px */
  --fs-h2: 1.25rem;  /* 20px */
  --fs-h3: 1.125rem; /* 18px */
  --fs-h4: 1rem;     /* 16px */

  /* ===== TYPOGRAPHY SPACING ===== */
  --spacing-base: 1.25em;       /* For paragraphs */
  --spacing-heading-lg: 1.5em;  /* For h1 */
  --spacing-heading-md: 1.2em;  /* For h2 */
  --spacing-heading-sm: 0.9em;  /* For h3 and h4 */

}