/* ==========================================================================
   MDS Design System - Base Styles
   Typography, resets, and foundational element styles
   ========================================================================== */

/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700;900&family=Roboto+Slab:wght@300;700&display=swap');

/* ==========================================================================
   Base Reset
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--mds-font-sans);
  font-size: var(--mds-body-size);
  line-height: var(--mds-body-line);
  font-weight: var(--mds-weight-regular);
  color: var(--mds-text);
  background-color: var(--mds-bg-light);
}

/* ==========================================================================
   Typography - Headings
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--mds-font-serif);
  font-weight: var(--mds-weight-bold);
  color: var(--mds-text-title);
}

h5, h6 {
  font-family: var(--mds-font-sans);
  font-weight: var(--mds-weight-bold);
  color: var(--mds-text-title);
}

h1 {
  font-size: var(--mds-heading-h1-size);
  line-height: var(--mds-heading-h1-line);
}

h2 {
  font-size: var(--mds-heading-h2-size);
  line-height: var(--mds-heading-h2-line);
}

h3 {
  font-size: var(--mds-heading-h3-size);
  line-height: var(--mds-heading-h3-line);
}

h4 {
  font-size: var(--mds-heading-h4-size);
  line-height: var(--mds-heading-h4-line);
}

h5 {
  font-size: var(--mds-heading-h5-size);
  line-height: var(--mds-heading-h5-line);
}

h6 {
  font-size: var(--mds-heading-h6-size);
  line-height: var(--mds-heading-h6-line);
}

/* ==========================================================================
   Typography - Body & Inline
   ========================================================================== */

p {
  font-size: var(--mds-body-size);
  line-height: var(--mds-body-line);
  color: var(--mds-text);
}

strong, b {
  font-weight: var(--mds-weight-bold);
}

a {
  color: var(--mds-text-link);
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

/* ==========================================================================
   Typography - Semantic Classes
   ========================================================================== */

.mds-eyebrow {
  font-family: var(--mds-font-serif);
  font-size: var(--mds-eyebrow-size);
  line-height: var(--mds-eyebrow-line);
  font-weight: var(--mds-weight-bold);
  color: var(--mds-text-eyebrow);
}

.mds-badge {
  font-family: var(--mds-font-serif);
  font-size: var(--mds-badge-size);
  line-height: var(--mds-badge-line);
  font-weight: var(--mds-weight-bold);
}

.mds-body {
  font-family: var(--mds-font-sans);
  font-size: var(--mds-body-size);
  line-height: var(--mds-body-line);
  font-weight: var(--mds-weight-regular);
}

.mds-body--bold {
  font-weight: var(--mds-weight-bold);
}

/* Label sizes */
.mds-label-xs {
  font-family: var(--mds-font-sans);
  font-size: var(--mds-label-xs-size);
  line-height: var(--mds-label-xs-line);
}

.mds-label-sm {
  font-family: var(--mds-font-sans);
  font-size: var(--mds-label-sm-size);
  line-height: var(--mds-label-sm-line);
}

.mds-label-md {
  font-family: var(--mds-font-sans);
  font-size: var(--mds-label-md-size);
  line-height: var(--mds-label-md-line);
}

.mds-label-lg {
  font-family: var(--mds-font-sans);
  font-size: var(--mds-label-lg-size);
  line-height: var(--mds-label-lg-line);
}

.mds-label--bold {
  font-weight: var(--mds-weight-bold);
}

/* Info sizes */
.mds-info-sm {
  font-family: var(--mds-font-sans);
  font-size: var(--mds-info-sm-size);
  line-height: var(--mds-info-sm-line);
  font-weight: var(--mds-weight-regular);
}

.mds-info-md {
  font-family: var(--mds-font-sans);
  font-size: var(--mds-info-md-size);
  line-height: var(--mds-info-md-line);
  font-weight: var(--mds-weight-regular);
}

.mds-info-lg {
  font-family: var(--mds-font-sans);
  font-size: var(--mds-info-lg-size);
  line-height: var(--mds-info-lg-line);
  font-weight: var(--mds-weight-regular);
}

/* Heading with light weight variant */
.mds-heading--light {
  font-weight: var(--mds-weight-light);
}

/* Mailing typography */
.mds-mail-h1 {
  font-family: var(--mds-font-mail);
  font-size: var(--mds-mail-h1-size);
  line-height: var(--mds-mail-h1-line);
  font-weight: var(--mds-weight-bold);
}

.mds-mail-h2 {
  font-family: var(--mds-font-mail);
  font-size: var(--mds-mail-h2-size);
  line-height: var(--mds-mail-h2-line);
  font-weight: var(--mds-weight-bold);
}

.mds-mail-h3 {
  font-family: var(--mds-font-mail);
  font-size: var(--mds-mail-h3-size);
  line-height: var(--mds-mail-h3-line);
  font-weight: var(--mds-weight-bold);
}

.mds-mail-body {
  font-family: var(--mds-font-mail);
  font-size: var(--mds-mail-body-size);
  line-height: var(--mds-mail-body-line);
  font-weight: var(--mds-weight-regular);
}

.mds-mail-body--bold {
  font-weight: var(--mds-weight-bold);
}

.mds-mail-legal {
  font-family: var(--mds-font-mail);
  font-size: var(--mds-mail-legal-size);
  line-height: var(--mds-mail-legal-line);
  font-weight: var(--mds-weight-regular);
}

.mds-mail-legal--bold {
  font-weight: var(--mds-weight-bold);
}

/* ==========================================================================
   Responsive Typography (Mobile-first)
   ========================================================================== */

/* Mobile-first: headings use mobile sizes by default */
@media (max-width: 743px) {
  h1 {
    font-size: 32px;
    line-height: 40px;
  }

  h2 {
    font-size: 28px;
    line-height: 32px;
  }

  h3 {
    font-size: 24px;
    line-height: 32px;
  }

  h4 {
    font-size: 20px;
    line-height: 24px;
  }
}

/* ==========================================================================
   Layout Container
   ========================================================================== */

.mds-container {
  width: 100%;
  max-width: var(--mds-body-width-desktop);
  margin-inline: auto;
  padding-inline: var(--mds-space-4);
}

@media (max-width: 743px) {
  .mds-container {
    max-width: var(--mds-body-width-mobile);
  }
}

@media (min-width: 744px) and (max-width: 1439px) {
  .mds-container {
    max-width: var(--mds-body-width-tablet);
  }
}

/* ==========================================================================
   Focus Styles
   ========================================================================== */

:focus-visible {
  outline: var(--mds-stroke-focus) solid var(--mds-border-focus);
  outline-offset: 2px;
}