/* Material 3 non-color tokens + global base, shared by every app (served at /shared/m3.css).
   Color roles (--m3-primary, --m3-surface, ...) are written to <html> by M3Core (/shared/m3-core.js). */

:root {
  /* Shape scale */
  --m3-shape-none: 0px;
  --m3-shape-extra-small: 4px;
  --m3-shape-small: 8px;
  --m3-shape-medium: 12px;
  --m3-shape-large: 16px;
  --m3-shape-extra-large: 28px;
  --m3-shape-full: 9999px;

  /* Elevation */
  --m3-elevation-1: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --m3-elevation-2: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --m3-elevation-3: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.3);

  /* Motion */
  --m3-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --m3-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --m3-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --m3-duration-short: 150ms;
  --m3-duration-medium: 250ms;
  --m3-duration-long: 400ms;

  /* State layer opacities */
  --m3-state-hover: 0.08;
  --m3-state-focus: 0.1;
  --m3-state-pressed: 0.1;
  --m3-state-dragged: 0.16;

  /* Type scale: size / line-height / weight / tracking */
  --m3-font: 'Google Sans', 'Google Sans Text', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --m3-type-display-large: 400 3.5625rem/4rem var(--m3-font);
  --m3-type-display-medium: 400 2.8125rem/3.25rem var(--m3-font);
  --m3-type-display-small: 400 2.25rem/2.75rem var(--m3-font);
  --m3-type-headline-large: 400 2rem/2.5rem var(--m3-font);
  --m3-type-headline-medium: 400 1.75rem/2.25rem var(--m3-font);
  --m3-type-headline-small: 400 1.5rem/2rem var(--m3-font);
  --m3-type-title-large: 400 1.375rem/1.75rem var(--m3-font);
  --m3-type-title-medium: 500 1rem/1.5rem var(--m3-font);
  --m3-type-title-small: 500 0.875rem/1.25rem var(--m3-font);
  --m3-type-label-large: 500 0.875rem/1.25rem var(--m3-font);
  --m3-type-label-medium: 500 0.75rem/1rem var(--m3-font);
  --m3-type-label-small: 500 0.6875rem/1rem var(--m3-font);
  --m3-type-body-large: 400 1rem/1.5rem var(--m3-font);
  --m3-type-body-medium: 400 0.875rem/1.25rem var(--m3-font);
  --m3-type-body-small: 400 0.75rem/1rem var(--m3-font);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--m3-surface);
  color: var(--m3-on-surface);
  font: var(--m3-type-body-large);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--m3-duration-medium) var(--m3-easing-standard),
    color var(--m3-duration-medium) var(--m3-easing-standard);
}

/* Material Symbols */
.material-symbols-outlined,
.material-symbols-rounded {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
  user-select: none;
}

/* Keyboard focus indicator (M3 focus ring) */
:where(a, button, [role='button'], [role='tab'], [role='menuitem'], [tabindex]):focus-visible {
  outline: 3px solid var(--m3-secondary);
  outline-offset: 2px;
}

a {
  color: var(--m3-primary);
}

/* Screen-reader-only text */
.m3-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}