/* PawKeeper Pro — base layout and non-colour tokens. Colours live in themes.css. */
:root {
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast: 150ms;
  --dur-normal: 250ms;
  --dur-slow: 400ms;
  --dur-page: 300ms;

  --shadow-card: 0 1px 2px rgba(40, 32, 34, 0.05), 0 4px 14px rgba(40, 32, 34, 0.04);
  --shadow-elev: 0 4px 12px rgba(40, 32, 34, 0.08), 0 10px 28px rgba(40, 32, 34, 0.07);

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
}
[data-theme="dark"] {
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-elev: 0 6px 20px rgba(0, 0, 0, 0.45);
}

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

html, body {
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

*:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

button { font-family: inherit; color: inherit; }

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

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border-accent); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

.pk-page {
  padding: 16px;
  max-width: 1180px;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .pk-page { padding: 28px 32px; }
}

/* Every page stacks its cards with the same breathing room. */
.pk-page > div { display: flex; flex-direction: column; gap: 14px; }
.pk-page > div > .pk-page-header { margin-bottom: 0; }

.pk-skeleton {
  background: linear-gradient(90deg, var(--divider) 0%, var(--surface-alt) 50%, var(--divider) 100%);
  background-size: 200% 100%;
  animation: pk-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

@keyframes pk-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.pk-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Loader + offline pill (index.html) */
.pk-loader-dot { width: 48px; height: 48px; margin: 0 auto 16px; border-radius: 50%; background: var(--accent-1); animation: pk-pulse 1.2s ease-in-out infinite; }
@keyframes pk-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.pk-offline-pill { background: var(--info-bg); color: var(--info-text); }