/**
 * RKMovies Admin Dashboard — Reveal Design System Tokens
 * Strict MotionSites palette: Deep black, soft white, refined amber/gold & emerald, ZERO blue/purple, ZERO emojis.
 */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Cinematic Black & Frosted Glass */
  --bg-canvas: #000000;
  --bg-canvas-subtle: #050507;
  --bg-surface: rgba(16, 16, 20, 0.65);
  --bg-surface-elevated: rgba(24, 24, 28, 0.75);
  --bg-surface-hover: rgba(32, 32, 38, 0.85);
  --bg-surface-glass: rgba(8, 8, 12, 0.75);
  --bg-modal-backdrop: rgba(0, 0, 0, 0.88);

  /* Hairlines & Inner Highlights */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.18);
  --border-focus: rgba(255, 255, 255, 0.4);
  --highlight-top: inset 0 1px 0 0 rgba(255, 255, 255, 0.12);

  /* High-Contrast Typography */
  --text-primary: #ffffff;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --text-dim: #3f3f46;

  /* Refined Accents (Strictly NO Blue, NO Purple) */
  --accent-white: #ffffff;                /* Traffic / Visits */
  --accent-white-glow: rgba(255, 255, 255, 0.22);
  
  --accent-amber: #f59e0b;                /* Downloads / Conversions */
  --accent-amber-glow: rgba(245, 158, 11, 0.22);
  
  --accent-emerald: #10b981;              /* Revenue / Net Profit / Growth */
  --accent-emerald-glow: rgba(16, 185, 129, 0.22);
  
  --accent-rose: #ef4444;                 /* Ad Spend / Losses / Negative Deltas */
  --accent-rose-glow: rgba(239, 68, 68, 0.22);

  /* Elevation Shadows */
  --shadow-glass: var(--highlight-top), 0 20px 40px -15px rgba(0, 0, 0, 0.8);
  --shadow-glass-hover: var(--highlight-top), 0 28px 60px -10px rgba(0, 0, 0, 0.95);
  --shadow-glow-white: 0 0 28px var(--accent-white-glow);
  --shadow-glow-amber: 0 0 28px var(--accent-amber-glow);
  --shadow-glow-emerald: 0 0 28px var(--accent-emerald-glow);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 9999px;

  /* Typography Stack */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

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

body {
  font-family: var(--font-sans);
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Monochromatic Ambient Glow Backdrop (NO Blue, NO Purple) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: 
    radial-gradient(circle at 50% -10%, rgba(255, 255, 255, 0.08), transparent 60%),
    radial-gradient(circle at 15% 30%, rgba(245, 158, 11, 0.04), transparent 50%),
    radial-gradient(circle at 85% 45%, rgba(16, 185, 129, 0.04), transparent 50%),
    #000000;
}

/* Subtle Geometric Dot Grid */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle at 50% 30%, black, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at 50% 30%, black, transparent 80%);
  opacity: 0.6;
}

/* Tabular figures for exact numerical alignment */
.num, .amount, .date, .pct, code {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}

/* Reveal Motion: Blur-In Stagger Animation */
@keyframes revealBlurIn {
  0% {
    opacity: 0;
    filter: blur(14px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0);
  }
}

.animate-reveal {
  animation: revealBlurIn 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-reveal-delay-1 {
  animation: revealBlurIn 600ms cubic-bezier(0.16, 1, 0.3, 1) 120ms forwards;
}

.animate-reveal-delay-2 {
  animation: revealBlurIn 600ms cubic-bezier(0.16, 1, 0.3, 1) 240ms forwards;
}