/* ========================
   BASE — Reset + default element styles (M3 tokens)
   ======================== */

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

/* Force form elements to inherit Roboto instead of browser defaults */
button, input, select, textarea {
  font-family: inherit;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--md-font-main);
  font-size: var(--md-body-medium-size);
  line-height: var(--md-body-medium-line);
  font-weight: var(--md-body-medium-weight);
  background-color: var(--md-surface);
  color: var(--md-on-surface);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--md-primary);
  text-decoration: none;
  transition: color var(--md-motion-duration-short) var(--md-motion-easing-standard);
}

a:hover {
  color: var(--md-on-primary-container);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  list-style: none;
}

/* M3 Typography — heading defaults */
h1 {
  font-size: var(--md-display-small-size);
  line-height: var(--md-display-small-line);
  font-weight: var(--md-display-small-weight);
  letter-spacing: var(--md-display-small-tracking);
}

h2 {
  font-size: var(--md-headline-large-size);
  line-height: var(--md-headline-large-line);
  font-weight: var(--md-headline-large-weight);
  letter-spacing: var(--md-headline-large-tracking);
}

h3 {
  font-size: var(--md-headline-medium-size);
  line-height: var(--md-headline-medium-line);
  font-weight: var(--md-headline-medium-weight);
  letter-spacing: var(--md-headline-medium-tracking);
}

h4 {
  font-size: var(--md-title-large-size);
  line-height: var(--md-title-large-line);
  font-weight: var(--md-title-large-weight);
  letter-spacing: var(--md-title-large-tracking);
}

h5 {
  font-size: var(--md-title-medium-size);
  line-height: var(--md-title-medium-line);
  font-weight: var(--md-title-medium-weight);
  letter-spacing: var(--md-title-medium-tracking);
}

h6 {
  font-size: var(--md-title-small-size);
  line-height: var(--md-title-small-line);
  font-weight: var(--md-title-small-weight);
  letter-spacing: var(--md-title-small-tracking);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--md-on-surface);
}

p {
  color: var(--md-on-surface-variant);
  margin-bottom: var(--md-spacing-4);
}

/* M3 Typography utility classes */
.md-display-large   { font-size: var(--md-display-large-size);   line-height: var(--md-display-large-line);   font-weight: var(--md-display-large-weight);   letter-spacing: var(--md-display-large-tracking); }
.md-display-medium  { font-size: var(--md-display-medium-size);  line-height: var(--md-display-medium-line);  font-weight: var(--md-display-medium-weight);  letter-spacing: var(--md-display-medium-tracking); }
.md-display-small   { font-size: var(--md-display-small-size);   line-height: var(--md-display-small-line);   font-weight: var(--md-display-small-weight);   letter-spacing: var(--md-display-small-tracking); }
.md-headline-large  { font-size: var(--md-headline-large-size);  line-height: var(--md-headline-large-line);  font-weight: var(--md-headline-large-weight);  letter-spacing: var(--md-headline-large-tracking); }
.md-headline-medium { font-size: var(--md-headline-medium-size); line-height: var(--md-headline-medium-line); font-weight: var(--md-headline-medium-weight); letter-spacing: var(--md-headline-medium-tracking); }
.md-headline-small  { font-size: var(--md-headline-small-size);  line-height: var(--md-headline-small-line);  font-weight: var(--md-headline-small-weight);  letter-spacing: var(--md-headline-small-tracking); }
.md-title-large     { font-size: var(--md-title-large-size);     line-height: var(--md-title-large-line);     font-weight: var(--md-title-large-weight);     letter-spacing: var(--md-title-large-tracking); }
.md-title-medium    { font-size: var(--md-title-medium-size);    line-height: var(--md-title-medium-line);    font-weight: var(--md-title-medium-weight);    letter-spacing: var(--md-title-medium-tracking); }
.md-title-small     { font-size: var(--md-title-small-size);     line-height: var(--md-title-small-line);     font-weight: var(--md-title-small-weight);     letter-spacing: var(--md-title-small-tracking); }
.md-body-large      { font-size: var(--md-body-large-size);      line-height: var(--md-body-large-line);      font-weight: var(--md-body-large-weight);      letter-spacing: var(--md-body-large-tracking); }
.md-body-medium     { font-size: var(--md-body-medium-size);     line-height: var(--md-body-medium-line);     font-weight: var(--md-body-medium-weight);     letter-spacing: var(--md-body-medium-tracking); }
.md-body-small      { font-size: var(--md-body-small-size);      line-height: var(--md-body-small-line);      font-weight: var(--md-body-small-weight);      letter-spacing: var(--md-body-small-tracking); }
.md-label-large     { font-size: var(--md-label-large-size);     line-height: var(--md-label-large-line);     font-weight: var(--md-label-large-weight);     letter-spacing: var(--md-label-large-tracking); }
.md-label-medium    { font-size: var(--md-label-medium-size);    line-height: var(--md-label-medium-line);    font-weight: var(--md-label-medium-weight);    letter-spacing: var(--md-label-medium-tracking); }
.md-label-small     { font-size: var(--md-label-small-size);     line-height: var(--md-label-small-line);     font-weight: var(--md-label-small-weight);     letter-spacing: var(--md-label-small-tracking); }