:root {
  /* Nordic Paper Theme - Minimalist & Elegant */
  --bg-paper: #fdfbf7; /* Cream / Off-White Background */
  --primary-color: #64748b; /* Slate Blue - Application Elements */
  --primary-dark: #475569;
  --text-main: #1e293b; /* Dark Slate - Main Text */
  --text-muted: #94a3b8; /* Muted Text */
  --accent-color: #f97316; /* Burnt Orange - Selection/Highlights */

  --bg-secondary: #f1f5f9; /* Light Slate - Secondary Background */
  --bg-tertiary: #e2e8f0; /* Lighter Slate - Tertiary Background */

  /* UI Utilities */
  --header-height: 45px; /* Shorter header as requested */
  --footer-height: 30px; /* Slim footer estimated height */

  /* Typography */
  --font-main: "Outfit", sans-serif;
  --font-paper: "Lora", serif;

  /* Paper Effects */
  --paper-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --inset-shadow:
    inset 2px 2px 4px rgba(0, 0, 0, 0.05),
    inset -2px -2px 4px rgba(255, 255, 255, 0.8);
  --glass-bg: rgba(255, 255, 255, 0.8); /* Frosted glass becoming Paper-like */
  --glass-border: rgba(0, 0, 0, 0.05);
}

/* Midnight Paper Theme (Dark Mode) */
body.dark-mode {
  --bg-paper: #1e2329; /* Dark Lead/Blue */
  --primary-color: #cdd9e5; /* Pearl Grey Text/Elements */
  --primary-dark: #adbac7;
  --text-main: #cdd9e5; /* Pearl Grey */
  --text-muted: #768390;
  --accent-color: #ffa726; /* Lighter/Golden Orange for better contrast on dark */

  --bg-secondary: #0d1117; /* Darker background for components */
  --bg-tertiary: #30363d; /* Lighter background for slots */

  --glass-border: #444c56; /* Medium Grey Border */
  --paper-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5); /* Deeper shadows */
}

/* Ensure glass panel adapts to dark mode */
body.dark-mode .glass-panel {
  background: #2d333b; /* Darker Grey Surface */
  border-color: var(--glass-border);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent; /* Remove default mobile highlight */
}

body {
  font-family: var(--font-main);
  color: var(--text-main);
  background-color: var(--bg-paper);
  /* Optional: Subtle paper texture pattern could happen here */
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* App Container */
#app {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100vw;
}

/* Utility: Paper Panel (Replacing Glass Panel concept) */
.glass-panel {
  background: white;
  border: 1px solid var(--glass-border);
  box-shadow: var(--paper-shadow);
  border-radius: 12px;
}

/* Utility: Hidden */
.hidden {
  display: none !important;
}

/* Button Reset */
button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

/* Debug Mode Floating Button */
.debug-btn {
  display: none; /* Hidden by default */
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--accent-color, #007bff);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 50px;
  font-family: var(--font-main, sans-serif);
  font-weight: bold;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 20003; /* Above everything */
  transition: transform 0.2s ease;
}

.debug-btn:hover {
  transform: scale(1.05);
}

/* Visibility Trigger */
body.debug-mode .debug-btn,
body.beta-mode .debug-btn {
  display: block;
}

body.dark-mode .debug-btn {
  color: #1e293b; /* Match btn-primary text color in dark mode */
}