/* gograb-id — shell-level CSS variables + reset.
 *
 * Dark glass-morphism aesthetic matching my-vitto / gograb-space.
 * Components consume these via `var(--id-*)` from light DOM (the app
 * doesn't use Shadow DOM in v0; keeps CSP/style-src simple and matches
 * pulse-player's pattern).
 */

:root {
  --id-bg: #0b0e14;
  --id-bg-elevated: #11151c;
  --id-fg: #e6e8eb;
  --id-fg-muted: #9aa0a6;
  --id-glass: rgba(15, 15, 23, 0.72);
  --id-border: rgba(99, 102, 241, 0.35);
  --id-border-subtle: rgba(255, 255, 255, 0.08);
  --id-accent-from: #818cf8;
  --id-accent-to: #f472b6;
  --id-accent: linear-gradient(135deg, var(--id-accent-from) 0%, var(--id-accent-to) 100%);
  --id-danger: #ef4444;
  --id-success: #10b981;
  --id-radius: 12px;
  --id-radius-sm: 8px;
  --id-blur: 10px;
  --id-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
  --id-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --id-font-size: 15px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--id-bg);
  color: var(--id-fg);
  font-family: var(--id-font);
  font-size: var(--id-font-size);
  min-height: 100vh;
  /* Subtle diagonal vignette so the centered card has presence. */
  background-image:
    radial-gradient(ellipse at top left, rgba(129, 140, 248, 0.10), transparent 40%),
    radial-gradient(ellipse at bottom right, rgba(244, 114, 182, 0.08), transparent 45%);
}

gograb-id-app {
  display: block;
  min-height: 100vh;
}

button {
  font-family: inherit;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}