/**
 * The Card Vault System — design tokens
 * Canonical source: sports/shared/web/vault/
 * Copied to /vault/ (site root) and /{sport}/vault/ at build time.
 */

@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap");

:root {
  /* Surfaces */
  --vault-bg-0: #0a0e14;
  --vault-bg-1: #0f141c;
  --vault-bg-2: #151c28;
  --vault-panel: #1a2332;
  --vault-panel-raised: #212d3f;
  --vault-card-face: #1c2636;
  --vault-card-inner: #243044;
  --vault-line: rgba(148, 163, 184, 0.14);
  --vault-line-strong: rgba(148, 163, 184, 0.28);

  /* Typography */
  --vault-font-display: "Bebas Neue", "Barlow Condensed", sans-serif;
  --vault-font-body: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --vault-text: #f1f5f9;
  --vault-text-muted: #94a3b8;
  --vault-text-dim: #64748b;

  /* Spacing */
  --vault-space-1: 0.25rem;
  --vault-space-2: 0.5rem;
  --vault-space-3: 0.75rem;
  --vault-space-4: 1rem;
  --vault-space-5: 1.25rem;
  --vault-space-6: 1.5rem;
  --vault-space-8: 2rem;
  --vault-space-10: 2.5rem;
  --vault-space-12: 3rem;

  /* Radius */
  --vault-radius-sm: 6px;
  --vault-radius-md: 10px;
  --vault-radius-lg: 14px;
  --vault-radius-card: 12px;

  /* Shadows */
  --vault-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--vault-line);
  --vault-shadow-lift: 0 12px 40px rgba(0, 0, 0, 0.45);
  --vault-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* Sport accents (override per workspace) */
  --vault-sport-accent: #f59e0b;
  --vault-sport-surface: #12203a;

  /* Status */
  --vault-status-active: #34d399;
  --vault-status-planned: #94a3b8;
  --vault-status-stale: #fbbf24;
  --vault-status-error: #f87171;
  --vault-status-withheld: #a78bfa;

  /* Signal direction */
  --vault-signal-positive: #4ade80;
  --vault-signal-negative: #fb7185;
  --vault-signal-neutral: #94a3b8;

  /* Confidence bands */
  --vault-conf-a: #38bdf8;
  --vault-conf-b: #60a5fa;
  --vault-conf-c: #94a3b8;
  --vault-conf-d: #64748b;

  /* Card classification accents (analytical, not gambling) */
  --vault-variant-chrome: #94a3b8;
  --vault-variant-refractor: #22d3ee;
  --vault-variant-retro: #d4a574;
  --vault-variant-blue-ice: #3b82f6;
  --vault-variant-zebra-ice: #e2e8f0;
  --vault-variant-tiger-ice: #f97316;
  --vault-variant-rookie: #a3e635;
  --vault-variant-manga: #f472b6;
  --vault-variant-auto: #4ade80;
  --vault-variant-patch: #fbbf24;

  /* Motion */
  --vault-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --vault-duration-fast: 140ms;
  --vault-duration: 220ms;
}

/* Hub can opt into light vault; sports default dark */
body.vault-theme,
body.theme-dark.vault-theme,
.vault-app {
  color: var(--vault-text);
  font-family: var(--vault-font-body);
  background:
    radial-gradient(ellipse 120% 80% at 10% -20%, rgba(56, 89, 140, 0.22), transparent 50%),
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(245, 158, 11, 0.08), transparent 45%),
    linear-gradient(180deg, var(--vault-bg-1) 0%, var(--vault-bg-0) 100%);
  min-height: 100vh;
}

body.vault-theme::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --vault-duration-fast: 0ms;
    --vault-duration: 0ms;
  }
}