:root {
  /* ═══ Background ═══ */
  --bg-base-top: #3a3430;
  --bg-base-mid: #26252a;
  --bg-base-bottom: #14161a;

  /* ═══ Panels ═══ */
  --panel-top: rgba(78,82,101,1);
  --panel-bottom: rgba(28,30,40,1);
  --panel-radius: 18px;
  --panel-stroke: rgba(255,255,255,0.35);
  --panel-shadow: 0 16px 24px rgba(0,0,0,0.80);
  --panel-inner-shadow: inset 0 3px 12px rgba(0,0,0,0.20);

  /* ═══ Stat tiles ═══ */
  --tile-top: rgba(62,56,64,1);
  --tile-bottom: rgba(26,21,32,1);
  --tile-radius: var(--rs, 12px);
  --tile-stroke: rgba(255,255,255,0.30);
  --tile-shadow: 0 8px 16px 2px rgba(0,0,0,0.80);

  /* ═══ Recent tool cards ═══ */
  --card-radius: var(--rs, 12px);
  --card-stroke: rgba(255,255,255,0.15);
  --card-shadow: 0 6px 10px rgba(0,0,0,0.50);

  /* ═══ Quick start buttons ═══ */
  --button-radius: 14px;
  --button-stroke: rgba(255,255,255,0.20);
  --button-shadow: 0 8px 12px rgba(0,0,0,0.60);

  /* ═══ Button accent colors ═══ */
  --accent-green-top: rgba(74,140,82,1);
  --accent-green-bottom: rgba(30,74,40,1);
  --accent-amber-top: rgba(196,137,42,1);
  --accent-amber-bottom: rgba(122,74,16,1);
  --accent-teal-top: rgba(45,122,106,1);
  --accent-teal-bottom: rgba(14,58,48,1);

  /* ═══ Theory card ═══ */
  --theory-top: rgba(226,217,189,1);
  --theory-bottom: rgba(182,162,122,1);
  --theory-radius: 14px;
  --theory-stroke: rgba(196,137,42,0.80);

  /* ═══ Typography ═══ */
  --text-primary: var(--tx, rgba(255,255,255,0.92));
  --text-secondary: var(--td, rgba(255,255,255,0.70));
  --text-muted: var(--tm, rgba(255,255,255,0.50));
  --text-theory-title: #1a1008;
  --text-theory-body: #1a1008;
  --text-theory-label: #b8762a;

  /* ═══ Stat accent colors ═══ */
  --stat-streak: #ff6b35;
  --stat-practice: #9b59b6;
  --stat-accuracy: #4caf50;
  --stat-best: #c4892a;

  /* ═══ App title gradient ═══ */
  --title-gradient: linear-gradient(90deg, #ff9484 0%, #9b59b6 100%);

  /* ═══ Nav ═══ */
  --nav-label: #888888;
  --nav-active: #ffffff;
}