/* ── BASE CSS ── */
/* BUG-040 FIX: Added :focus-visible styles site-wide for keyboard navigation */
/* BUG-045 FIX: Removed duplicate @keyframes spin (moved to animations.css only) */
/* BUG-042 (partial): Scrollbar Firefox support added */

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

html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue-600); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: var(--font); cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: var(--font); }

img { max-width:100%; display:block; }

/* ══════════════════════════════════════════════════════════════
   BUG-040 FIX: Global focus-visible styles
   Only shows the ring for keyboard navigation (Tab key), not mouse
   clicks — matches modern browser UX expectations while ensuring
   every interactive element has a visible focus indicator.
   ══════════════════════════════════════════════════════════════ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.nav-item:focus-visible,
.topnav-btn:focus-visible,
.tab-btn:focus-visible,
.chip:focus-visible,
.card-hover:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Remove default outline only when focus-visible is supported and not active */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  outline: none;
}

/* ── SCROLLBAR ── */
/* BUG-042 FIX: Firefox scrollbar support added alongside webkit */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--gray-300) transparent;
}
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--gray-300); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--gray-400); }
[data-theme="dark"] { scrollbar-color: var(--gray-700) transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background:var(--gray-700); }

/* ── PAGE LOADER ── */
.page-loader {
  position:fixed; inset:0; background:var(--bg); z-index:9999;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .3s, visibility .3s;
}
.page-loader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.loader-ring {
  width:44px; height:44px; border:3px solid var(--gray-200);
  border-top-color:var(--brand-primary); border-radius:50%;
  animation:spin .8s linear infinite;
}
/* BUG-045 FIX: @keyframes spin removed from here — defined once in animations.css */

/* ── TOAST ── */
.toast-container {
  position:fixed; bottom:24px; right:24px; z-index:9998;
  display:flex; flex-direction:column; gap:10px;
}
.toast {
  background:var(--gray-900); color:white; padding:12px 18px;
  border-radius:var(--r-md); box-shadow:var(--shadow-md);
  font-size:var(--fs-sm); font-weight:500; max-width:340px;
  display:flex; align-items:center; gap:10px;
  animation:slideInToast .3s var(--ease);
  border-left:3px solid var(--brand-primary);
}
.toast.success { border-left-color:var(--green-600); }
.toast.error   { border-left-color:#EF4444; }
.toast.info    { border-left-color:var(--blue-600); }
@keyframes slideInToast {
  from { transform:translateX(110%); opacity:0; }
  to   { transform:translateX(0);    opacity:1; }
}

/* ── TYPOGRAPHY UTILITIES ── */
.text-xs   { font-size:var(--fs-xs);   }
.text-sm   { font-size:var(--fs-sm);   }
.text-base { font-size:var(--fs-base); }
.text-md   { font-size:var(--fs-md);   }
.text-lg   { font-size:var(--fs-lg);   }
.text-xl   { font-size:var(--fs-xl);   }
.text-2xl  { font-size:var(--fs-2xl);  }
.text-3xl  { font-size:var(--fs-3xl);  }

.font-medium { font-weight:500; }
.font-semibold { font-weight:600; }
.font-bold   { font-weight:700; }
.font-extrabold { font-weight:800; }
.font-black  { font-weight:900; }
.font-head   { font-family:var(--font-head); }

.text-muted  { color:var(--text-2); }
.text-light  { color:var(--text-3); }
/* BUG-261 FIX: text-brand now uses --brand-text (darker, WCAG AA compliant)
   instead of --brand-primary (fails 4.5:1 contrast on white backgrounds) */
.text-brand  { color:var(--brand-text); }
.text-blue   { color:var(--blue-600); }
.text-green  { color:var(--green-600); }
.text-red    { color:#EF4444; }
.text-white  { color:var(--white); }

/* ── SPACING UTILITIES ── */
/* BUG-231 FIX: Added mb-1, mb-3, mb-5, mb-8, mt-5 which were used in
   templates but never defined (silently had no effect) */
.mt-1{margin-top:var(--sp-1)}.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}.mt-6{margin-top:var(--sp-6)}.mt-8{margin-top:var(--sp-8)}
.mb-1{margin-bottom:var(--sp-1)}.mb-2{margin-bottom:var(--sp-2)}.mb-3{margin-bottom:var(--sp-3)}
.mb-4{margin-bottom:var(--sp-4)}.mb-5{margin-bottom:var(--sp-5)}.mb-6{margin-bottom:var(--sp-6)}.mb-8{margin-bottom:var(--sp-8)}
.p-3{padding:var(--sp-3)}.p-4{padding:var(--sp-4)}.p-5{padding:var(--sp-5)}.p-6{padding:var(--sp-6)}
.px-4{padding-left:var(--sp-4);padding-right:var(--sp-4)}
.py-2{padding-top:var(--sp-2);padding-bottom:var(--sp-2)}

/* ── DISPLAY UTILITIES ── */
.flex{display:flex}.grid{display:grid}.hidden{display:none!important}.block{display:block}
.items-center{align-items:center}.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}
.gap-1{gap:var(--sp-1)}.gap-2{gap:var(--sp-2)}.gap-3{gap:var(--sp-3)}
.gap-4{gap:var(--sp-4)}.gap-6{gap:var(--sp-6)}

/* ── WIDTH UTILITIES ── */
.w-full{width:100%}.h-full{height:100%}.w-auto{width:auto}

/* ── BORDER RADIUS ── */
.rounded{border-radius:var(--r)}.rounded-md{border-radius:var(--r-md)}
.rounded-lg{border-radius:var(--r-lg)}.rounded-full{border-radius:var(--r-full)}

/* ── SHADOWS ── */
.shadow-sm{box-shadow:var(--shadow-sm)}.shadow{box-shadow:var(--shadow)}
.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}

/* ── OVERFLOW ── */
.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── POSITION ── */
.relative{position:relative}.absolute{position:absolute}.sticky{position:sticky}
.fixed{position:fixed}.inset-0{inset:0}

/* ── SKELETON LOADING ── */
.skeleton {
  background:linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:var(--r);
}
@keyframes shimmer {
  from { background-position:200% 0; }
  to   { background-position:-200% 0; }
}
[data-theme="dark"] .skeleton {
  background:linear-gradient(90deg,#2a2a3a 25%,#33334a 50%,#2a2a3a 75%);
  background-size:200% 100%;
}

/* ── BADGE ── */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px; border-radius:var(--r-full);
  font-size:var(--fs-xs); font-weight:600;
}
/* BUG-261 FIX: badge-primary text uses --brand-text for contrast, bg stays brand-primary */
.badge-primary { background:rgba(255,107,53,.12); color:var(--brand-text); }
.badge-blue    { background:var(--blue-100); color:var(--blue-700); }
.badge-green   { background:var(--green-100); color:var(--green-600); }
.badge-gray    { background:var(--gray-100); color:var(--gray-600); }

/* ── DIVIDER ── */
.divider { width:100%; height:1px; background:var(--border); margin:var(--sp-4) 0; }

/* ── AVATAR ── */
.avatar {
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:var(--fs-md); flex-shrink:0;
}
.avatar-sm { width:30px; height:30px; font-size:var(--fs-xs); }
.avatar-lg { width:54px; height:54px; font-size:var(--fs-xl); }
.avatar-orange { background:linear-gradient(135deg,#FB923C,#F97316); color:white; }
.avatar-blue   { background:linear-gradient(135deg,#60A5FA,#2563EB); color:white; }
.avatar-green  { background:linear-gradient(135deg,#34D399,#16A34A); color:white; }
.avatar-purple { background:linear-gradient(135deg,#A78BFA,#7C3AED); color:white; }

/* ── TAG ── */
.tag {
  display:inline-block; padding:4px 12px; border-radius:var(--r-full);
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.3px;
}