/* base.css — Reset, CSS variables, typography */

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

/* Ensure [hidden] always wins over any display rule in component CSS */
[hidden] { display: none !important; }

:root {
  --color-brand:        #3D7DD6;   /* Planning Center blue */
  --color-danger:       #DC2626;   /* Alert red */
  --color-text:         #111827;
  --color-text-muted:   #6B7280;
  --color-bg:           #F9FAFB;
  --color-surface:      #FFFFFF;
  --color-border:       #E5E7EB;
  --color-green:        #16A34A;
  --color-yellow:       #CA8A04;

  --radius:   0.5rem;
  --shadow:   0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
}

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
}

a {
  color: var(--color-brand);
  text-decoration: none;
}

/* Spinner for loading states */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .6s linear infinite;
  vertical-align: middle;
}

/* Toast notification */
#toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(4rem);
  background: var(--color-text);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: var(--radius);
  font-size: .9rem;
  white-space: nowrap;
  transition: transform .25s ease;
  z-index: 9999;
  pointer-events: none;
}

#toast.show {
  transform: translateX(-50%) translateY(0);
}