/* Local fonts to replace Google Fonts CDN
   Place the corresponding .woff2 files in the paths referenced below.
   Directory structure (relative to this CSS file):
   - ./roboto/roboto-latin-300.woff2
   - ./roboto/roboto-latin-400.woff2
   - ./roboto/roboto-latin-500.woff2
   - ./material-icons/material-icons.woff2
   - ./material-icons/material-symbols-outlined.woff2

   Notes:
   - We use font-display: swap to avoid FOIT and improve perceived performance (for text fonts).
   - Icons use font-display: block to avoid a temporary wrong glyph.
   - Only WOFF2 is referenced for modern browsers. If you must support very old browsers, also add WOFF fallbacks.
*/

/* Roboto Light (300) */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('./roboto/roboto-latin-300.woff2') format('woff2');
}

/* Roboto Regular (400) */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./roboto/roboto-latin-400.woff2') format('woff2');
}

/* Roboto Medium (500) */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./roboto/roboto-latin-500.woff2') format('woff2');
}

/* Material Icons (classic ligature font used by <mat-icon> when using the classic set) */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  font-display: block; /* icons should not swap to avoid glyph mismatch */
  src: url('./material-icons/material-icons.woff2') format('woff2');
}

/* Material Symbols Outlined (variable icon font used by .mat-icon via CSS override) */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700; /* variable font range */
  font-display: block;
  src: url('./material-icons/material-symbols-outlined.woff2') format('woff2');
}

/* Utility classes if needed directly in templates */
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Adjust as needed */
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}