/* ════════════════════════════════════════════════════
   ZüriHub Design System v2.0
   Modern Dashboard UI Tokens
   ════════════════════════════════════════════════════ */

/* ── Typography: Inter (UI) + Fraunces (Display) ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ── Glass surfaces ── */
  --glass-bg: rgba(255,255,255,0.68);
  --glass-border: rgba(255,255,255,0.55);
  --glass-blur: blur(16px);

  /* ── Refined shadow scale ── */
  --shadow-xs: 0 1px 2px rgba(13,27,42,0.04);
  --shadow-soft: 0 1px 3px rgba(13,27,42,0.04), 0 4px 12px rgba(13,27,42,0.06);
  --shadow-hover: 0 4px 16px rgba(13,27,42,0.10), 0 12px 32px rgba(13,27,42,0.08);
  --shadow-elevated: 0 16px 48px rgba(13,27,42,0.12), 0 2px 8px rgba(13,27,42,0.06);

  /* ── Motion ── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-normal: 250ms;
  --dur-slow: 400ms;
}

html.dark {
  --glass-bg: rgba(21,34,53,0.72);
  --glass-border: rgba(42,63,88,0.5);
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-soft: 0 1px 3px rgba(0,0,0,0.15), 0 4px 12px rgba(0,0,0,0.2);
  --shadow-hover: 0 4px 16px rgba(0,0,0,0.25), 0 12px 32px rgba(0,0,0,0.2);
  --shadow-elevated: 0 16px 48px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.2);
}

/* ── Skeleton loading shimmer ── */
@keyframes shimmer {
  0%   { background-position: -200% 0 }
  100% { background-position: 200% 0 }
}

.skeleton-card {
  border-radius: 16px;
  background: linear-gradient(90deg, var(--surface2, #EBF0F7) 25%, var(--border-light, #E8EDF5) 37%, var(--surface2, #EBF0F7) 63%);
  background-size: 200% 100%;
  animation: shimmer 1.8s ease infinite;
  min-height: 170px;
}

html.dark .skeleton-card {
  background: linear-gradient(90deg, var(--surface2) 25%, var(--border) 37%, var(--surface2) 63%);
  background-size: 200% 100%;
  animation: shimmer 1.8s ease infinite;
}

/* ── Smooth scroll ── */
html { scroll-behavior: smooth }

/* ── Focus visible ring ── */
:focus-visible {
  outline: 2px solid var(--primary, #0F47AF);
  outline-offset: 2px;
}
button:focus-visible, a:focus-visible { border-radius: 6px }

/* ── Selection ── */
::selection {
  background: var(--primary, #0F47AF);
  color: #fff;
}

/* ── View transition helper ── */
.view-fade { transition: opacity var(--dur-normal) var(--ease), transform var(--dur-normal) var(--ease) }