/* ============================================
   MD3 Base Reset & Foundation
   ============================================ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  height: 100vh;
  height: -webkit-fill-available;
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}

/* ---- MD3 Typography Utility Classes ---- */
.md-display-large {
  font-size: var(--md-sys-typescale-display-large-size);
  line-height: var(--md-sys-typescale-display-large-line);
  font-weight: var(--md-sys-typescale-display-large-weight);
}
.md-display-medium {
  font-size: var(--md-sys-typescale-display-medium-size);
  line-height: var(--md-sys-typescale-display-medium-line);
  font-weight: var(--md-sys-typescale-display-medium-weight);
}
.md-headline-medium {
  font-size: var(--md-sys-typescale-headline-medium-size);
  line-height: var(--md-sys-typescale-headline-medium-line);
  font-weight: var(--md-sys-typescale-headline-medium-weight);
}
.md-title-large {
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: var(--md-sys-typescale-title-large-line);
  font-weight: var(--md-sys-typescale-title-large-weight);
}
.md-title-medium {
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line);
  font-weight: var(--md-sys-typescale-title-medium-weight);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
}
.md-body-large {
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  font-weight: var(--md-sys-typescale-body-large-weight);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
}
.md-body-medium {
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
  font-weight: var(--md-sys-typescale-body-medium-weight);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}
.md-label-large {
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
}
.md-label-small {
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: var(--md-sys-typescale-label-small-line);
  font-weight: var(--md-sys-typescale-label-small-weight);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
}

/* ---- Interactive Elements ---- */
button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  padding: 0;
  line-height: inherit;
}

input, textarea, select {
  border: none;
  outline: none;
  font-family: inherit;
  font-size: inherit;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  color: inherit;
}

a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

::selection {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

/* ---- MD3 Scrollbar ---- */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--md-sys-color-outline);
}

/* ---- MD3 Elevation Surface Classes ---- */
.surface-lowest { background: var(--md-sys-color-surface-container-lowest); }
.surface-low { background: var(--md-sys-color-surface-container-low); }
.surface { background: var(--md-sys-color-surface); }
.surface-high { background: var(--md-sys-color-surface-container-high); }
.surface-highest { background: var(--md-sys-color-surface-container-highest); }

.elevation-1 { box-shadow: var(--md-sys-elevation-level1); }
.elevation-2 { box-shadow: var(--md-sys-elevation-level2); }
.elevation-3 { box-shadow: var(--md-sys-elevation-level3); }