/* Microsoft Design System Font Implementation */

/* Use system fonts - Segoe UI is a system font on Windows */
/* No import needed as we're using system fonts */

:root {
  /* Microsoft Design System Typography */
  --ms-font-family: 'Segoe UI', 'Segoe UI Variable', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  
  /* Font Sizes - Based on Fluent 2 Design System */
  --ms-font-size-caption2: 0.625rem;     /* 10px */
  --ms-font-size-caption1: 0.75rem;      /* 12px */
  --ms-font-size-body1: 0.875rem;        /* 14px */
  --ms-font-size-subtitle2: 1rem;        /* 16px */
  --ms-font-size-subtitle1: 1.25rem;     /* 20px */
  --ms-font-size-title3: 1.5rem;         /* 24px */
  --ms-font-size-title2: 1.75rem;        /* 28px */
  --ms-font-size-title1: 2rem;           /* 32px */
  --ms-font-size-largetitle: 2.5rem;     /* 40px */
  --ms-font-size-display: 4.25rem;       /* 68px */
  
  /* Font Weights - Based on Fluent 2 Design System */
  --ms-weight-light: 300;
  --ms-weight-regular: 400;
  --ms-weight-medium: 500;
  --ms-weight-semibold: 600;
  --ms-weight-bold: 700;
  
  /* Line Heights - Based on Fluent 2 Design System */
  --ms-line-height-caption: 1.4;         /* 14px/10px or 16px/12px */
  --ms-line-height-body: 1.428;          /* 20px/14px */
  --ms-line-height-subtitle: 1.375;      /* 22px/16px or 26px/20px */
  --ms-line-height-title3: 1.333;        /* 32px/24px */
  --ms-line-height-title2: 1.286;        /* 36px/28px */
  --ms-line-height-title1: 1.25;         /* 40px/32px */
  --ms-line-height-largetitle: 1.3;      /* 52px/40px */
  --ms-line-height-display: 1.353;       /* 92px/68px */
}

/* Homepage H1 Unique Styling */
#logo h1 {
  font-family: var(--ms-font-family);
  font-size: var(--ms-font-size-title1);
  font-weight: var(--ms-weight-semibold);
  letter-spacing: -0.02em;
  color: var(--text-color);
  transition: color 0.3s ease;
  position: relative;
  display: inline-block;
}

#logo h1::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--primary-color);
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s ease;
}

#logo h1:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.header-container h1 {
  font-family: var(--ms-font-family);
  font-size: var(--ms-font-size-subtitle1);
  font-weight: var(--ms-weight-regular);
  line-height: var(--ms-line-height-subtitle);
  letter-spacing: 0;
  max-width: var(--width-medium);
  margin: 1rem auto;
}

/* General Typography Overrides */
body {
  font-family: var(--ms-font-family);
}

h1 {
  font-family: var(--ms-font-family);
  font-size: var(--ms-font-size-largetitle);
  font-weight: var(--ms-weight-semibold);
  line-height: var(--ms-line-height-largetitle);
  letter-spacing: -0.02em;
}

h2 {
  font-family: var(--ms-font-family);
  font-size: var(--ms-font-size-title1);
  font-weight: var(--ms-weight-semibold);
  line-height: var(--ms-line-height-title1);
  letter-spacing: -0.01em;
}

h3 {
  font-family: var(--ms-font-family);
  font-size: var(--ms-font-size-title2);
  font-weight: var(--ms-weight-semibold);
  line-height: var(--ms-line-height-title2);
  letter-spacing: -0.01em;
}

h4 {
  font-family: var(--ms-font-family);
  font-size: var(--ms-font-size-title3);
  font-weight: var(--ms-weight-semibold);
  line-height: var(--ms-line-height-title3);
  letter-spacing: 0;
}

h5 {
  font-family: var(--ms-font-family);
  font-size: var(--ms-font-size-subtitle1);
  font-weight: var(--ms-weight-semibold);
  line-height: var(--ms-line-height-subtitle);
  letter-spacing: 0;
}

h6 {
  font-family: var(--ms-font-family);
  font-size: var(--ms-font-size-subtitle2);
  font-weight: var(--ms-weight-semibold);
  line-height: var(--ms-line-height-subtitle);
  letter-spacing: 0;
}

p {
  font-family: var(--ms-font-family);
  font-size: var(--ms-font-size-body1);
  font-weight: var(--ms-weight-regular);
  line-height: var(--ms-line-height-body);
}

small {
  font-family: var(--ms-font-family);
  font-size: var(--ms-font-size-caption1);
  font-weight: var(--ms-weight-regular);
  line-height: var(--ms-line-height-caption);
}

/* Responsive Typography */
@media screen and (max-width: 768px) {
  h1 {
    font-size: var(--ms-font-size-title1);
  }
  
  h2 {
    font-size: var(--ms-font-size-title2);
  }
  
  h3 {
    font-size: var(--ms-font-size-title3);
  }
  
  h4 {
    font-size: var(--ms-font-size-subtitle1);
  }
  
  #logo h1 {
    font-size: var(--ms-font-size-title2);
  }
}

@media screen and (max-width: 480px) {
  h1 {
    font-size: var(--ms-font-size-title2);
  }
  
  h2 {
    font-size: var(--ms-font-size-title3);
  }
  
  h3 {
    font-size: var(--ms-font-size-subtitle1);
  }
  
  h4 {
    font-size: var(--ms-font-size-subtitle2);
  }
  
  #logo h1 {
    font-size: var(--ms-font-size-subtitle1);
  }
  
  .header-container h1 {
    font-size: var(--ms-font-size-body1);
  }
}