/* ==========================================================================
   Design Tokens & CSS Variables - ScanMan
   ========================================================================== */

:root {
  /* Color Palette - Deep Obsidian & Sleek Slates */
  --bg-app: #070a11;
  --bg-surface: #0e1526;
  --bg-card: rgba(18, 26, 45, 0.75);
  --bg-card-hover: rgba(26, 38, 64, 0.85);
  --bg-card-active: rgba(33, 49, 82, 0.95);
  --bg-input: rgba(10, 16, 29, 0.8);
  --bg-overlay: rgba(5, 8, 15, 0.85);

  /* Border & Glass Tokens */
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-medium: rgba(255, 255, 255, 0.14);
  --border-focus: #38bdf8;
  --glass-blur: blur(16px);
  --glass-blur-sm: blur(8px);

  /* Vibrant Accents */
  --accent-cyan: #06b6d4;
  --accent-cyan-light: #38bdf8;
  --accent-cyan-glow: rgba(56, 189, 248, 0.35);
  
  --accent-emerald: #10b981;
  --accent-emerald-light: #34d399;
  --accent-emerald-glow: rgba(16, 185, 129, 0.3);
  --accent-emerald-subtle: rgba(16, 185, 129, 0.12);

  --accent-amber: #f59e0b;
  --accent-amber-light: #fbbf24;
  --accent-amber-glow: rgba(245, 158, 11, 0.3);
  --accent-amber-subtle: rgba(245, 158, 11, 0.12);

  --accent-rose: #f43f5e;
  --accent-rose-light: #fb7185;
  --accent-rose-glow: rgba(244, 63, 94, 0.3);
  --accent-rose-subtle: rgba(244, 63, 94, 0.12);

  --accent-indigo: #6366f1;
  --accent-indigo-glow: rgba(99, 102, 241, 0.3);

  /* Typography Colors */
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #64748b;
  --text-inverse: #030712;

  /* Typography Fonts & Hierarchy */
  --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, monospace;
  
  --font-xs: 0.75rem;
  --font-sm: 0.8125rem;
  --font-base: 0.875rem;
  --font-md: 1rem;
  --font-lg: 1.125rem;
  --font-xl: 1.35rem;
  --font-2xl: 1.65rem;

  /* Radii & Shadows */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 35px rgba(0, 0, 0, 0.55);
  --shadow-glow-cyan: 0 0 25px rgba(56, 189, 248, 0.25);
  --shadow-glow-emerald: 0 0 25px rgba(16, 185, 129, 0.25);
  --shadow-glow-amber: 0 0 25px rgba(245, 158, 11, 0.25);

  /* Bounding Box Selector Neon Tokens */
  --box-cyan: #38bdf8;
  --box-cyan-bg: rgba(56, 189, 248, 0.14);
  --box-emerald: #10b981;
  --box-emerald-bg: rgba(16, 185, 129, 0.14);
  --box-amber: #f59e0b;
  --box-amber-bg: rgba(245, 158, 11, 0.16);

  /* Transition Speeds */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}