/* ═══════════════════════════════════════════════════════════════
   DRACONES Design Tokens — Core System
   NilPilot by DRACONES Ecosystem
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ─── Colors ─── */
  --gold: #C9A84C;
  --gold-light: #E8CA7A;
  --gold-dim: rgba(201,168,76,0.12);
  --gold-mid: rgba(201,168,76,0.35);
  --gold-glow: rgba(201,168,76,0.5);
  --gold-bright: #F0D78C;

  --bg-dark: #0A0A0A;
  --bg-card: #141414;
  --bg-card-hover: #1C1C1C;
  --bg-section: #0F0F0F;
  --bg-input: #1A1A1A;
  --bg-overlay: rgba(0,0,0,0.7);

  --text-primary: #F5F5F5;
  --text-secondary: #A0A0A0;
  --text-muted: #666666;
  --text-inverse: #0A0A0A;

  --border: #222222;
  --border-light: #333333;
  --border-focus: var(--gold);

  --red-accent: #FF4D4D;
  --green-accent: #4ADE80;
  --blue-accent: #60A5FA;
  --violet-accent: #8B5CF6;
  --violet-light: #A78BFA;
  --violet-dim: rgba(139,92,246,0.12);

  /* ─── Spacing Scale (4px base) ─── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ─── Border Radius ─── */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* ─── Shadows ─── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
  --shadow-gold: 0 0 20px rgba(201,168,76,0.25);
  --shadow-gold-lg: 0 0 40px rgba(201,168,76,0.35);

  /* ─── Transitions ─── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* ─── Z-Index Scale ─── */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  /* ─── Typography ─── */
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 40px;
  --text-5xl: 48px;

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;

  /* ─── Max Width ─── */
  --max-w-sm: 540px;
  --max-w-md: 720px;
  --max-w-lg: 960px;
  --max-w-xl: 1200px;

  /* ─── Gradient Tokens ─── */
  --gradient-gold: linear-gradient(90deg, #C9A84C, #E8CA7A);
  --gradient-gold-shine: linear-gradient(90deg, #C9A84C, #F0D78C, #C9A84C);
  --gradient-violet: linear-gradient(90deg, #8B5CF6, #A78BFA);
  --gradient-green: linear-gradient(90deg, #22C55E, #4ADE80);
  --gradient-blue: linear-gradient(90deg, #3B82F6, #60A5FA);
  --gradient-hero: linear-gradient(135deg, #0A0A0A 0%, #120C1E 40%, #0E0A14 70%, #0A0A0A 100%);
  --gradient-featured-card: linear-gradient(135deg, #141414 0%, #1A1020 60%, #141414 100%);

  /* ─── Animation Durations ─── */
  --duration-counter: 800ms;
  --duration-stagger-1: 0ms;
  --duration-stagger-2: 80ms;
  --duration-stagger-3: 160ms;
  --duration-stagger-4: 240ms;
  --duration-stagger-5: 320ms;
  --duration-stagger-6: 400ms;

  /* ─── Glow Effects ─── */
  --glow-gold-sm: 0 0 20px rgba(201,168,76,0.25);
  --glow-gold-md: 0 0 36px rgba(201,168,76,0.35);
  --glow-gold-lg: 0 0 60px rgba(201,168,76,0.4);
  --glow-violet-sm: 0 0 20px rgba(139,92,246,0.25);
  --glow-violet-md: 0 0 36px rgba(139,92,246,0.35);

  /* ─── Shimmer gradient (use with background-size:200% and animation) ─── */
  --shimmer-gold: linear-gradient(90deg, transparent 0%, rgba(201,168,76,0.8) 50%, transparent 100%);
  --shimmer-white: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);

  /* ─── Skeleton Loading System ─── */
  --skeleton-base: #1E1E1E;
  --skeleton-highlight: #2A2A2A;
  --skeleton-shimmer: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%);
  --skeleton-radius: var(--radius-xs);
  --skeleton-duration: 1.4s;

  /* ─── Widget State Colors ─── */
  --widget-off-bg: rgba(255,255,255,0.02);
  --widget-off-border: rgba(255,255,255,0.06);
  --widget-error-border: rgba(255,77,77,0.25);
  --widget-loading-opacity: 0.5;

  /* ─── Pull-to-Refresh ─── */
  --ptr-indicator-size: 40px;
  --ptr-threshold: 64px;
  --ptr-color: var(--gold);
}

/* ═══════════════════════════════════════════════════════════════
   Global Skeleton / Shimmer Utility Classes
   Available to ALL widgets without re-importing
   ═══════════════════════════════════════════════════════════════ */

@keyframes skeleton-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes widget-awaken {
  0%   { opacity: 0; transform: scale(0.97) translateY(6px); filter: saturate(0); }
  60%  { opacity: 1; transform: scale(1.01) translateY(-2px); filter: saturate(0.6); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: saturate(1); }
}

@keyframes skeleton-fade-out {
  0%   { opacity: 1; }
  100% { opacity: 0; pointer-events: none; }
}

@keyframes data-fade-in {
  0%   { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Skeleton pulse block */
.skeleton {
  background: var(--skeleton-base);
  background-image: var(--skeleton-shimmer);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  border-radius: var(--skeleton-radius);
  animation: skeleton-shimmer var(--skeleton-duration) linear infinite;
  display: inline-block;
}

/* Specific skeleton shapes */
.skeleton-line    { height: 14px; width: 100%; border-radius: 4px; }
.skeleton-line-sm { height: 12px; width: 60%;  border-radius: 4px; }
.skeleton-line-lg { height: 20px; width: 80%;  border-radius: 4px; }
.skeleton-circle  { border-radius: 50%; }
.skeleton-card    { width: 100%; height: 80px; border-radius: var(--radius-md); }
.skeleton-value   { height: 32px; width: 90px; border-radius: 6px; }
.skeleton-badge   { height: 24px; width: 120px; border-radius: var(--radius-full); }

/* Hide skeleton when data loaded */
.skeleton-container.loaded .skeleton-placeholder { display: none !important; }
.skeleton-container.loaded .data-content { animation: data-fade-in 0.3s var(--ease-out) both; }
.skeleton-container .data-content { display: none; }
.skeleton-container.loaded .data-content { display: block; }

/* Widget awaken transition (OFF → ON with data) */
.widget-awaken { animation: widget-awaken 0.5s var(--ease-out) both; }

/* Reduce motion: kill all skeleton animations, keep function */
@media (prefers-reduced-motion: reduce) {
  .skeleton,
  .skeleton-shimmer,
  [class*="skeleton"] {
    animation: none !important;
    background-image: none !important;
    background-color: var(--skeleton-base);
  }
  .widget-awaken { animation: none !important; }
  .kpi-card.kpi-in { animation: none !important; opacity: 1 !important; transform: none !important; }
  [class*="stagger-"] { animation-delay: 0ms !important; }
  .scroll-animate { opacity: 1 !important; transform: none !important; }
  .kpi-hero-particles { display: none; }
  .counter-animating { transition: none !important; }
}