/* Modern CSS Reset & Variable Tokens */
:root {
  color-scheme: dark;
  --bg-app: #080c14;
  --bg-sidebar: rgba(13, 20, 35, 0.88);
  --bg-card: rgba(22, 33, 54, 0.6);
  --bg-card-hover: rgba(30, 45, 75, 0.8);
  --input-bg: rgba(10, 15, 26, 0.85);

  --border-color: rgba(255, 255, 255, 0.08);
  --border-color-focus: rgba(6, 182, 212, 0.5);

  --text-main: #f3f4f6;
  --text-muted: #9ca3af;
  --text-heading: #ffffff;
  --text-inverse: #0b0f19;

  --primary: #06b6d4; /* Electric Cyan */
  --primary-hover: #0891b2;
  --primary-glow: rgba(6, 182, 212, 0.25);

  --success: #10b981; /* Electric Green */
  --success-hover: #059669;
  --success-glow: rgba(16, 185, 129, 0.25);

  --accent: #8b5cf6; /* Electric Violet */

  --danger: #ef4444; /* Coral Red */
  --danger-hover: #dc2626;
  --danger-glow: rgba(239, 68, 68, 0.25);

  --warning: #f59e0b; /* Neon Amber */

  --font-display: "Outfit", sans-serif;
  --font-sans: "Inter", sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-lg: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 15px rgba(6, 182, 212, 0.15);

  --tile-filter: brightness(0.7) invert(1) contrast(1.2) hue-rotate(180deg) saturate(0.3);
  --popup-bg: #0d1425;
}