/* ============================================================
   Critter Care IT — Global Theme
   Shared tokens, reset, and common components.
   Load before any page-specific <style> block.
   ============================================================ */

@font-face {
  font-family: "Jua";
  src: url("fonts/Jua-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Color tokens ── */
:root {
  --bg: #f5f3ff;
  --card: #ffffff;
  --ink: #1e1a35;
  --muted: #7a76a0;
  --line: #e2defc;
  --green: #1ea878;   --green-soft: #e4f8f1;
  --amber: #d07826;   --amber-soft: #fef3e4;
  --accent: #7c5ccf;  --accent-soft: #ede8ff;
  --red: #d44e73;     --red-soft: #fde8f0;
  /* Shared card border — single source of truth. Resolves --line per theme,
     so dark mode re-colors automatically. */
  --card-border: 4px solid var(--line);
  color-scheme: light;
}

/* ── Dark theme overrides ──
   Applied when <html data-theme="dark"> (set by theme-toggle.js).
   Only token values change; every component re-colors automatically. */
html[data-theme="dark"] {
  --bg: #15121f;
  --card: #201b30;
  --ink: #ece9f6;
  --muted: #a49ec6;
  --line: #998cc5;
  --green: #2fbd8c;   --green-soft: #143229;
  --amber: #e0974a;   --amber-soft: #38280f;
  --accent: #a385e6;  --accent-soft: #2c2447;
  --red: #e86c8d;     --red-soft: #371d28;
  color-scheme: dark;
}

/* ── Base ── */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;

  /* Animated pixel-art city backdrop, dimmed by a --bg-tinted gradient
     scrim so it reads as a subtle texture rather than a busy image.
     url() resolves relative to this stylesheet (repo root), so it works
     at any page depth. */
  background-image:
    linear-gradient(180deg, rgba(30,26,53,.62), rgba(30,26,53,.48)),
    url("assets/city-animted.gif");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
  background-attachment: fixed;
  image-rendering: pixelated;
}
html[data-theme="dark"] body {
  background-image:
    linear-gradient(180deg, rgba(21,18,31,.80), rgba(21,18,31,.66)),
    url("assets/city-dark-animted.gif");
}

/* ── Layout ── */
.wrap { max-width: 800px; margin: 0 auto; padding: 24px 16px 64px; }

/* ── Breadcrumb ── */
.brand {
  font-weight: 700; font-size: 16px; color: var(--muted);
  margin-bottom: 20px; display: flex; align-items: center; gap: 8px;
}
.brand a { color: inherit; text-decoration: none; }

/* ── Heading font ── */
h1, h2, h3,
.page-title, .hero-title,
.nav-card-title, .exam-title, .module-title, .chart-title {
  font-family: "Jua", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* ── Page header ── */
.page-title { font-size: 28px; font-weight: 800; margin-bottom: 4px; }
.page-sub   { font-size: 15px; color: var(--muted); margin-bottom: 28px; }

/* ── Exam badge pill ── */
.exam-badge {
  display: inline-block; padding: 3px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  background: var(--accent-soft); color: var(--accent); margin-bottom: 22px;
  border: 4px solid var(--accent);
}

/* ── Status chips ── */
.status { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; border: 4px solid; }
.status.done { background: var(--green-soft); color: var(--green); border-color: var(--green); }
.status.soon { background: var(--amber-soft); color: var(--amber); border-color: var(--amber); }
.status.none { background: #eceaf8; color: var(--muted); border-color: var(--line); }
html[data-theme="dark"] .status.none { background: #262036; }

/* ── Domain sections (module index pages) ── */
.domain { margin-bottom: 28px; }
.domain-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--line);
}
.domain-num      { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; }
.domain-name     { font-size: 15px; font-weight: 700; }
.domain-progress { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 600; }

/* ── Module cards (module index pages) ── */
.module-list { display: flex; flex-direction: column; gap: 10px; }
.module-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border: var(--card-border); border-radius: 12px;
  padding: 14px 18px; text-decoration: none; color: var(--ink);
  transition: border-color .12s, transform .05s;
}
.module-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.module-card.coming-soon { opacity: .5; cursor: not-allowed; pointer-events: none; }
.module-card.coming-soon:hover { border-color: var(--line); transform: none; }

.module-num   { font-size: 13px; font-weight: 700; color: var(--muted); min-width: 36px; text-align: right; }
.module-body  { flex: 1; }
.module-title { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.module-desc  { font-size: 13px; color: var(--muted); }

/* ── Part chips (multi-part modules) ── */
.module-parts { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.part-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--accent-soft); color: var(--accent);
  text-decoration: none; border: 4px solid transparent;
  transition: background .12s, border-color .12s;
}
.part-chip:hover { background: var(--accent); color: #fff; }

@media (max-width: 500px) {
  .module-card { flex-wrap: wrap; }
  .module-num  { min-width: auto; }
}

/* ── Text that sits directly on the page backdrop (not inside a card) ──
   The body carries a dark city scrim in BOTH themes, so these "outer"
   titles/labels/breadcrumbs read light regardless of light/dark mode.
   Placed last so it wins over the token-based colors above; card-internal
   text keeps using the --ink/--muted tokens. */
.brand,
.page-title,
.domain-name      { color: #efecfb; }
.page-sub,
.domain-num,
.domain-progress  { color: #cbc4ec; }
.brand, .page-title, .page-sub,
.domain-name, .domain-num, .domain-progress {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.domain-header { border-bottom-color: rgba(255, 255, 255, .18); }
