/* Shared tool theme — single source of truth for tool colors and button styles
   Brand color set to the exact blue used in timer.html: #0d6efd
*/
:root{
  --brand: #0d6efd;        /* exact Task Timer blue */
  --brand-strong: #0d6efd; /* keep same for outline hover/accents */
  --accent-green: #2f9a57;
  --accent-gray: #6b7280;
  --accent-red: #e55353;
  --bg: #f4f7fb;
  --card-bg: #ffffff;
  --muted: #6b7c89;
  --text-dark: #102a43;
  --radius: 10px;
}

/* Page defaults */
body {
  background: var(--bg);
  color: var(--text-dark);
  -webkit-font-smoothing:antialiased;
  font-family: Inter, Arial, Helvetica, sans-serif;
  margin: 0;
}

/* Card */
.tool-card, .card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(13,38,62,0.06);
}

/* Headings and links */
h1,h2,h3,.tool-title { color: var(--brand); }
/* Ensure Back to Main Menu uses the brand blue even if a page hard-coded another color */
.back-link { color: var(--brand) !important; text-decoration:none; }

/* Primary filled (Read full guide and filled primary buttons) */
.btn-primary, .read-guide {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  box-shadow: none;
}

/* Primary outline (download / demo) */
.btn-outline-primary {
  color: var(--brand);
  border-color: var(--brand);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: none;
}

/* Start / success */
.btn-success {
  background: var(--accent-green);
  border-color: var(--accent-green);
  color: #fff;
}

/* Neutral / Pause */
.btn-neutral, .btn-outline-secondary {
  color: var(--accent-gray);
  border-color: var(--accent-gray);
}

/* Danger / Reset */
.btn-danger {
  background: var(--accent-red);
  border-color: var(--accent-red);
  color: #fff;
}

/* Example / FAQ card */
.example-card, .faq-card {
  background: #fbfdff;
  border: 1px solid #eef5fb;
  border-radius: 8px;
  padding: .8rem;
}

/* Muted */
.muted, .small-muted { color: var(--muted); }

/* Inputs / selects */
.calendar-select, select, input[type="month"], input[type="number"] {
  border-radius: 8px;
  border: 1px solid #e4edf5;
  background: #fff;
  box-sizing: border-box;
}

/* Responsive */
@media (max-width:520px) {
  .tool-card { width:94vw; }
}