/* ============================================================
   Base reset + typography
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { font-size: 16px; scroll-behavior: auto; }
html.page-loading body { cursor: progress; }

html, body, a, button, input, textarea, select, [role="button"], .btn, .btn-icon, .fab, .nav-item, .nav-bar-item, .list-item {
  -webkit-tap-highlight-color: transparent;
}

a, button, [role="button"], .btn, .btn-icon, .fab, .nav-item, .nav-bar-item, .list-item {
  -webkit-touch-callout: none;
  user-select: none;
}

body {
  font-family: 'Roboto', 'Segoe UI', system-ui, sans-serif;
  background-color: var(--md-background);
  color: var(--md-on-background);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--md-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { display: block; max-width: 100%; }

input, button, textarea, select {
  font: inherit;
  outline: none;
}

/* MD3 type scale */
.ts-display-large  { font-size: 57px; font-weight: 400; line-height: 1.12; letter-spacing: -.25px; }
.ts-display-medium { font-size: 45px; font-weight: 400; line-height: 1.16; }
.ts-display-small  { font-size: 36px; font-weight: 400; line-height: 1.22; }
.ts-headline-large { font-size: 32px; font-weight: 400; line-height: 1.25; }
.ts-headline-medium{ font-size: 28px; font-weight: 400; line-height: 1.29; }
.ts-headline-small { font-size: 24px; font-weight: 400; line-height: 1.33; }
.ts-title-large    { font-size: 22px; font-weight: 400; line-height: 1.27; }
.ts-title-medium   { font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: .15px; }
.ts-title-small    { font-size: 14px; font-weight: 500; line-height: 1.43; letter-spacing: .1px; }
.ts-label-large    { font-size: 14px; font-weight: 500; line-height: 1.43; letter-spacing: .1px; }
.ts-label-medium   { font-size: 12px; font-weight: 500; line-height: 1.33; letter-spacing: .5px; }
.ts-label-small    { font-size: 11px; font-weight: 500; line-height: 1.45; letter-spacing: .5px; }
.ts-body-large     { font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: .5px; }
.ts-body-medium    { font-size: 14px; font-weight: 400; line-height: 1.43; letter-spacing: .25px; }
.ts-body-small     { font-size: 12px; font-weight: 400; line-height: 1.33; letter-spacing: .4px; }

/* Utility */
.sr-only { position:absolute; width:1px; height:1px; clip:rect(0,0,0,0); overflow:hidden; }
.flex    { display: flex; }
.flex-col{ display: flex; flex-direction: column; }
.items-center { align-items: center; }
.gap-8  { gap: 8px; }
.gap-16 { gap: 16px; }
.w-full { width: 100%; }
.text-center { text-align: center; }
.on-surface-variant { color: var(--md-on-surface-variant); }