/* ============================================================
   Code Tracker 360 — visual design system.
   Ported from Roamly's design language (warm neutral canvas, one
   teal accent, Plus Jakarta Sans / Fraunces, soft-shadow cards).
   Tokens match Roamly's own CSS; written as plain CSS classes since
   the app loads Tailwind via the Play CDN with no build step.

   Used by: base.html (the app shell, which also keeps its own inline
   copy of these rules) and the standalone auth pages, which link this
   file directly. Keep the two in step when changing a rule here.
   ============================================================ */
:root {
  --brand-50: 239 250 248; --brand-100: 215 242 238; --brand-200: 177 228 221; --brand-300: 127 207 198; --brand-400: 75 179 169;
  --brand-500: 42 151 142; --brand-600: 31 122 116; --brand-700: 29 98 94; --brand-800: 28 79 76; --brand-900: 27 66 64;
}
body { font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.font-display { font-family: "Fraunces", Georgia, serif; }

.card { background:#fff; border:1px solid rgba(231,229,228,.7); border-radius:16px; box-shadow:0 1px 2px rgba(28,25,23,.04), 0 4px 16px -4px rgba(28,25,23,.06); }
.card-pad { padding:24px; }
.card-hover { transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.card-hover:hover { box-shadow:0 2px 4px rgba(28,25,23,.04), 0 16px 40px -12px rgba(28,25,23,.18); transform:translateY(-2px); border-color:rgb(var(--brand-200)); }
.shadow-lift { box-shadow:0 2px 4px rgba(28,25,23,.04), 0 16px 40px -12px rgba(28,25,23,.18); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:12px; padding:10px 16px; font-size:15px; font-weight:600; transition:all .15s ease; cursor:pointer; border:1px solid transparent; }
.btn:active { transform:scale(.98); }
.btn-primary { background:rgb(var(--brand-600)); color:#fff; box-shadow:0 1px 2px rgba(27,66,64,.2); }
.btn-primary:hover { background:rgb(var(--brand-700)); }
.btn-secondary { background:#fff; color:#292524; border-color:#e7e5e4; }
.btn-secondary:hover { background:#fafaf9; border-color:#d6d3d1; }
.btn-ghost { background:transparent; color:#78716c; border-color:transparent; }
.btn-ghost:hover { background:#f5f5f4; color:#1c1917; }
.btn-sm { padding:6px 12px; font-size:13px; border-radius:10px; }

.chip { display:inline-flex; align-items:center; gap:6px; border-radius:9999px; padding:6px 14px; font-size:13px; font-weight:500; border:1px solid; cursor:pointer; user-select:none; transition:all .12s ease; }
.chip-off { background:#fff; border-color:#e7e5e4; color:#57534e; }
.chip-off:hover { border-color:#d6d3d1; color:#1c1917; }
.chip-on { background:#1c1917; border-color:#1c1917; color:#fff; }
.chip-brand { background:rgb(var(--brand-50)); color:rgb(var(--brand-800)); }
.chip-brand:hover { background:rgb(var(--brand-100)); }

.badge { display:inline-flex; align-items:center; gap:4px; border-radius:9999px; padding:2px 10px; font-size:12px; font-weight:600; white-space:nowrap; box-shadow:inset 0 0 0 1px currentColor; opacity:.92; }

.ct-input { width:100%; border-radius:12px; border:1px solid #e7e5e4; background:#fff; padding:10px 14px; font-size:15px; color:#1c1917; transition:all .15s ease; }
.ct-input::placeholder { color:#a8a29e; }
.ct-input:focus { outline:none; border-color:rgb(var(--brand-500)); box-shadow:0 0 0 4px rgb(var(--brand-500) / .15); }
.ct-label { display:block; font-size:13px; font-weight:600; color:#44403c; margin-bottom:6px; }

.eyebrow { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:#78716c; }
.h-page { font-size:28px; font-weight:700; letter-spacing:-0.01em; color:#1c1917; }
.h-card { font-size:17px; font-weight:700; color:#1c1917; }
.muted { color:#78716c; }
.ct-link { font-weight:600; color:rgb(var(--brand-700)); }
.ct-link:hover { color:rgb(var(--brand-800)); }
.stat-value { font-size:28px; font-weight:700; letter-spacing:-0.01em; color:#1c1917; font-variant-numeric:tabular-nums; }

.nav-item { display:flex; align-items:center; gap:10px; border-radius:10px; padding:7px 10px; font-size:13px; font-weight:500; color:#57534e; transition:background .12s,color .12s; }
.nav-item:hover { background:#f5f5f4; color:#1c1917; }
.nav-item.active { background:rgb(var(--brand-600) / .08); color:rgb(var(--brand-800)); font-weight:600; }
.nav-item.active svg { color:rgb(var(--brand-600)); }

.toast { display:flex; align-items:flex-start; gap:12px; background:#1c1917; color:#fff; padding:14px 16px; border-radius:16px; box-shadow:0 16px 40px -12px rgba(28,25,23,.4); font-size:14px; font-weight:500; animation:ctToastIn .3s ease; max-width:100%; }
.toast-out { opacity:0; transform:translateY(8px); transition:all .3s ease; }
.toast-dot { width:8px; height:8px; border-radius:9999px; margin-top:5px; flex-shrink:0; }
.toast-ok .toast-dot { background:#34d399; }
.toast-error .toast-dot { background:#f87171; }
@keyframes ctToastIn { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

/* ---- dark mode ---- */
html.dark body { background:#0b0d14; color:#e7e9ee; }
html.dark .card { background:#12151d; border-color:#262b38; }
html.dark .btn-secondary { background:#171b26; color:#e7e9ee; border-color:#333a4c; }
html.dark .btn-secondary:hover { background:#1b1f2a; border-color:#3f4759; }
html.dark .btn-ghost { color:#8891a5; }
html.dark .btn-ghost:hover { background:#1b1f2a; color:#e7e9ee; }
html.dark .chip-off { background:#171b26; border-color:#333a4c; color:#a3aabb; }
html.dark .chip-off:hover { border-color:#4d5468; color:#e7e9ee; }
html.dark .chip-on { background:#e7e9ee; border-color:#e7e9ee; color:#12151d; }
html.dark .chip-brand { background:rgba(31,122,116,.18); color:#5fd1c6; }
html.dark .chip-brand:hover { background:rgba(31,122,116,.28); }
html.dark .ct-input { background:#171b26; border-color:#333a4c; color:#e7e9ee; }
html.dark .ct-input::placeholder { color:#5b6377; }
html.dark .ct-label { color:#c3c8d4; }
html.dark .eyebrow { color:#8891a5; }
html.dark .h-page, html.dark .h-card, html.dark .stat-value { color:#e7e9ee; }
html.dark .muted { color:#8891a5; }
html.dark .ct-link { color:#5fd1c6; }
html.dark .ct-link:hover { color:#8be0d8; }
html.dark .nav-item { color:#a3aabb; }
html.dark .nav-item:hover { background:#1b1f2a; color:#e7e9ee; }
html.dark .nav-item.active { background:rgba(31,122,116,.18); color:#5fd1c6; }
html.dark .nav-item.active svg { color:#5fd1c6; }