/**
 * VOL SPIKE CANDIDATE — INSTITUTIONAL DESIGN TOKENS
 * Bloomberg Terminal Dark Standard (Strict Zero Violet/Purple Accents)
 */

:root {
  /* Surfaces & Elevations */
  --token-bg-canvas: #07090E;
  --token-bg-subtle: #0A0E15;
  --token-bg-surface: #0D121B;
  --token-bg-surface-hover: #131A26;
  --token-bg-elevated: #161E2E;
  --token-bg-glass: rgba(13, 18, 27, 0.75);

  /* Borders & Dividers */
  --token-border-subtle: rgba(255, 255, 255, 0.08);
  --token-border-default: rgba(255, 255, 255, 0.14);
  --token-border-strong: rgba(255, 255, 255, 0.22);
  --token-border-focus: #00D2C4;

  /* Typography */
  --token-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --token-font-mono: 'JetBrains Mono', 'Fira Code', Menlo, monospace;

  /* Text Colors */
  --token-text-primary: #F1F5F9;
  --token-text-secondary: #94A3B8;
  --token-text-muted: #64748B;
  --token-text-heading: #FFFFFF;

  /* Market Action Accents */
  --token-bull: #00E676;
  --token-bull-glow: rgba(0, 230, 118, 0.2);
  --token-bull-bg: rgba(0, 230, 118, 0.1);
  --token-bear: #FF3B69;
  --token-bear-glow: rgba(255, 59, 105, 0.2);
  --token-bear-bg: rgba(255, 59, 105, 0.1);
  --token-cyan: #00D2C4;
  --token-cyan-glow: rgba(0, 210, 196, 0.2);
  --token-amber: #FFB300;
  --token-amber-glow: rgba(255, 179, 0, 0.2);

  /* Geometry & Spacing */
  --token-radius-xs: 2px;
  --token-radius-sm: 4px;
  --token-radius-md: 6px;
  --token-radius-lg: 8px;

  /* Transitions & Motion */
  --token-transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --token-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --token-transition-smooth: 300ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows & Depth */
  --token-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --token-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --token-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.65);
}

/* Skeleton Loading State Shimmer */
@keyframes skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 25%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.03) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.8s infinite linear;
  border-radius: var(--token-radius-sm);
}

.skeleton-card {
  height: 120px;
  width: 100%;
}

.skeleton-line {
  height: 14px;
  width: 100%;
  margin-bottom: 8px;
}

.skeleton-line.short {
  width: 60%;
}

/* Native View Transition API Enhancements */
::view-transition-old(root) {
  animation: 160ms cubic-bezier(0.4, 0, 1, 1) both vt-fade-out;
}

::view-transition-new(root) {
  animation: 200ms cubic-bezier(0, 0, 0.2, 1) both vt-fade-in;
}

@keyframes vt-fade-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.995); }
}

@keyframes vt-fade-in {
  from { opacity: 0; transform: scale(0.995); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
  .skeleton-shimmer {
    animation: none !important;
  }
}