/* Breakpoints: mobile ≤767px | tablet 768–1023px | desktop ≥1024px */

:root {
  --bg-primary: #1a1f1c;
  --bg-secondary: #1f2522;
  --bg-card: #222926;
  --bg-card-hover: #273029;
  --bg-input: #171c1a;
  --text-primary: #edf0eb;
  --text-secondary: #b4bdb6;
  --text-muted: #7f8a82;
  --accent: #56a47f;
  --accent-hover: #69b28d;
  --accent-dim: rgba(86, 164, 127, 0.16);
  --success: #7bcb9d;
  --success-dim: rgba(123, 203, 157, 0.14);
  --error: #d87c71;
  --error-dim: rgba(216, 124, 113, 0.14);
  --warning: #d4ab67;
  --warning-dim: rgba(212, 171, 103, 0.15);
  --border: #303934;
  --border-light: #414b45;
  --shell-bg: rgba(27, 33, 30, 0.9);
  --shell-border: rgba(236, 240, 235, 0.08);
  --shadow-soft: 0 20px 48px rgba(5, 9, 7, 0.24);
  --shadow-strong: 0 24px 72px rgba(3, 5, 4, 0.3);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: clamp(0.75rem, 0.6rem + 0.35vw, 1rem);
  --spacing-lg: clamp(1rem, 0.75rem + 0.75vw, 1.5rem);
  --spacing-xl: clamp(1.25rem, 1rem + 1vw, 2rem);
  --spacing-2xl: clamp(1.75rem, 1.25rem + 1.5vw, 3rem);
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Newsreader', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --max-width: min(92vw, 100rem);
  --nav-height: 56px;
  --topbar-height: 96px;
  --sidebar-width: 236px;
  --transition: 0.22s cubic-bezier(0.16, 1, 0.3, 1);

  /* Quiz card accent colors */
  --card-lecture: #70adca;
  --card-lecture-dim: rgba(112, 173, 202, 0.14);
  --card-expert: #8d958f;
  --card-expert-dim: rgba(141, 149, 143, 0.12);
  --card-recall: #c28b58;
  --card-recall-dim: rgba(194, 139, 88, 0.15);
  --card-official: #69b58c;
  --card-official-dim: rgba(105, 181, 140, 0.14);
  --card-rohan: #c07d57;
  --card-rohan-dim: rgba(192, 125, 87, 0.15);
  --card-playground: #d4ab67;
  --card-playground-dim: rgba(212, 171, 103, 0.15);

  /* Background pattern */
  --bg-pattern-image: url('../img/bg-pharmacy-dark.webp');
  --bg-pattern-opacity: 0.07;
}


/* Paper Verdant light mode */
[data-theme="light"] {
  --bg-primary: #f5efe6;
  --bg-secondary: #fcf8f1;
  --bg-card: #fffdf8;
  --bg-card-hover: #f1e8db;
  --bg-input: #efe5d6;
  --text-primary: #1f1a16;
  --text-secondary: #655c55;
  --text-muted: #8c8279;
  --accent: #2d6a4f;
  --accent-hover: #245841;
  --accent-dim: rgba(45, 106, 79, 0.12);
  --success: #3d8a64;
  --success-dim: rgba(61, 138, 100, 0.12);
  --error: #c15e53;
  --error-dim: rgba(193, 94, 83, 0.11);
  --warning: #af7e35;
  --warning-dim: rgba(175, 126, 53, 0.15);
  --border: #ddd1c2;
  --border-light: #ebe2d6;
  --shell-bg: rgba(255, 251, 245, 0.88);
  --shell-border: rgba(43, 37, 31, 0.08);
  --shadow-soft: 0 18px 42px rgba(55, 42, 29, 0.09);
  --shadow-strong: 0 24px 60px rgba(43, 33, 23, 0.13);

  /* Quiz card accent colors (light) */
  --card-lecture: #5f8f82;
  --card-lecture-dim: rgba(95, 143, 130, 0.1);
  --card-expert: #8d9187;
  --card-expert-dim: rgba(141, 145, 135, 0.1);
  --card-recall: #b28045;
  --card-recall-dim: rgba(178, 128, 69, 0.12);
  --card-official: #2d6a4f;
  --card-official-dim: rgba(45, 106, 79, 0.1);
  --card-rohan: #8d5f46;
  --card-rohan-dim: rgba(141, 95, 70, 0.11);
  --card-playground: #af7e35;
  --card-playground-dim: rgba(175, 126, 53, 0.15);

  --bg-pattern-image: url('../img/bg-pharmacy-light2.webp');
  --bg-pattern-opacity: 0.10;
}

/* Glass Mode: dark readable content with translucent shell chrome */
[data-theme="glass"] {
  --bg-primary: #101916;
  --bg-secondary: #16211e;
  --bg-card: #1b2824;
  --bg-card-hover: #22342f;
  --bg-input: #0f1917;
  --text-primary: #e7f0eb;
  --text-secondary: #c5d3cc;
  --text-muted: #9cada5;
  --accent: #64c7a7;
  --accent-hover: #7bd9bb;
  --accent-dim: rgba(100, 199, 167, 0.13);
  --success: #76c59d;
  --success-dim: rgba(118, 197, 157, 0.11);
  --error: #c77970;
  --error-dim: rgba(199, 121, 112, 0.11);
  --warning: #c6a86d;
  --warning-dim: rgba(198, 168, 109, 0.12);
  --border: rgba(205, 232, 226, 0.12);
  --border-light: rgba(229, 250, 246, 0.18);
  --shell-bg: rgba(16, 28, 27, 0.025);
  --shell-border: rgba(232, 252, 255, 0.28);
  --shadow-soft: 0 12px 30px rgba(1, 8, 10, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --shadow-strong: 0 18px 44px rgba(1, 8, 10, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.16);

  --glass-panel-bg: rgba(16, 29, 27, 0.62);
  --glass-panel-bg-strong: rgba(13, 25, 23, 0.72);
  --glass-panel-border: rgba(214, 238, 229, 0.16);
  --glass-panel-highlight: rgba(255, 255, 255, 0.10);

  --card-lecture: #69c3a4;
  --card-lecture-dim: rgba(105, 195, 164, 0.11);
  --card-expert: #aebbb5;
  --card-expert-dim: rgba(174, 187, 181, 0.11);
  --card-recall: #b99b68;
  --card-recall-dim: rgba(185, 155, 104, 0.12);
  --card-official: #68b997;
  --card-official-dim: rgba(104, 185, 151, 0.11);
  --card-rohan: #c28a68;
  --card-rohan-dim: rgba(194, 138, 104, 0.12);
  --card-playground: #c6a86d;
  --card-playground-dim: rgba(198, 168, 109, 0.12);

  --bg-pattern-image: url('../img/bg-pharmacy-dark.webp');
  --bg-pattern-opacity: 0.28;
}

/* Sidebar icon buttons (theme, sound toggles) */
.sidebar-icon-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.sidebar-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.sidebar-icon-btn:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

.sidebar-icon-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Full-width block button for sign-out */
.btn-block {
  display: block;
  width: 100%;
  text-align: center;
}

/* Tighter spacing on mobile */
@media (max-width: 767px) {
  :root {
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-2xl: 32px;
  }
}