/* ── VM5 Design Tokens ──────────────────────────────────────────────────────
   CSS custom properties that pierce Shadow DOM boundaries.
   All vm5-* components read from these variables.
   ─────────────────────────────────────────────────────────────────────────── */

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

:root {
  /* ── Surface ── */
  --vm5-bg: #f5f5f5;
  --vm5-surface: #ffffff;
  --vm5-surface-hover: #f0f0f0;

  /* ── Border ── */
  --vm5-border: #e0e0e0;
  --vm5-border-strong: #3d3d3d;

  /* ── Text ── */
  --vm5-text: #111111;
  --vm5-text-muted: #666666;

  /* ── Accent (primary action) ── */
  --vm5-accent: #111111;
  --vm5-accent-hover: #333333;
  --vm5-accent-fg: #ffffff;

  /* ── Status ── */
  --vm5-success: #16a34a;
  --vm5-success-bg: #f0fdf4;
  --vm5-success-border: #bbf7d0;

  --vm5-error: #dc2626;
  --vm5-error-bg: #fef2f2;
  --vm5-error-border: #fecaca;

  --vm5-warning: #d97706;
  --vm5-warning-bg: #fffbeb;
  --vm5-warning-border: #fde68a;

  --vm5-info: #2563eb;
  --vm5-info-bg: #eff6ff;
  --vm5-info-border: #bfdbfe;

  /* ── Typography ── */
  --vm5-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --vm5-font-mono: 'SF Mono', 'Consolas', 'Monaco', monospace;
  --vm5-font-size: 14px;

  /* ── Shape ── */
  --vm5-radius-sm: 6px;
  --vm5-radius: 10px;
  --vm5-radius-lg: 16px;

  /* ── Shadow ── */
  --vm5-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --vm5-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --vm5-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);

  /* ── Motion ── */
  --vm5-transition: 0.15s ease;
}

html,
body {
  background: var(--vm5-bg);
  color: var(--vm5-text);
  font-family: var(--vm5-font);
  font-size: var(--vm5-font-size);
  min-height: 100vh;
}

/* ── Anti-FOUC for Shadow DOM layout components ──────────────────────────────
   Hide these before their JS upgrades to prevent raw slot content from
   flashing. Since tokens.css is a synchronous <link>, this rule is already
   active before any JavaScript executes.
   ─────────────────────────────────────────────────────────────────────────── */
vm5-page:not(:defined),
vm5-card:not(:defined),
vm5-modal:not(:defined) {
  display: none;
}

/* Smooth fade-in once the element upgrades and becomes visible */
@keyframes vm5-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

vm5-page {
  animation: vm5-fade-in 0.18s ease;
}