/* ============================================================
   shared.css — CSS variables used by both overlay and dashboard
   ============================================================ */

:root {
  /* --- Timer display (user-configurable via dashboard) --- */
  --timer-color: #ffffff;
  --timer-glow: #00d4ff;
  --timer-font: 'Bebas Neue', sans-serif;

  /* --- Dashboard UI --- */
  --bg-primary:     #0d0d0d;
  --bg-secondary:   #161616;
  --bg-surface:     #1e1e1e;
  --bg-surface-alt: #252525;

  --text-primary:   #f0f0f0;
  --text-secondary: #999;
  --text-muted:     #555;

  --accent:         #00d4ff;
  --accent-dim:     rgba(0, 212, 255, 0.12);
  --accent-border:  rgba(0, 212, 255, 0.35);

  --success:        #22c55e;
  --success-dim:    rgba(34, 197, 94, 0.12);
  --warning:        #f59e0b;
  --danger:         #ef4444;
  --danger-dim:     rgba(239, 68, 68, 0.12);

  --border:         rgba(255, 255, 255, 0.07);
  --border-strong:  rgba(255, 255, 255, 0.14);

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;

  --font-display: 'Bebas Neue', sans-serif;
  --font-ui:      'Inter', system-ui, sans-serif;

  --transition: 0.15s ease;
}