@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

* { box-sizing: border-box; }

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

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-0);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--sp-3);
  color: var(--text-primary);
}

h1 { font-size: var(--fs-4); }
h2 { font-size: var(--fs-3); }
h3 {
  font-size: var(--fs-2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
}
h4 {
  font-size: var(--fs-1);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
}

p {
  margin: 0 0 var(--sp-4);
  color: var(--text-secondary);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
}

small { font-size: var(--fs-00); color: var(--text-tertiary); }

a {
  color: var(--brand-strong);
  text-decoration: none;
  font-weight: var(--fw-medium);
}
a:hover { text-decoration: underline; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* Respect reduced-motion preference across all transitions/animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}

::selection {
  background: var(--brand-soft);
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-full);
  border: 2px solid var(--bg);
}

/* ============================================================
   PRIMITIVES
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 44px;
  min-height: 44px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-md);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-0);
  letter-spacing: var(--ls-normal);
  border: 1.5px solid transparent;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-med) var(--ease), background var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible { box-shadow: var(--focus-ring); }
.btn[hidden] { display: none; }

.btn-primary {
  background: var(--brand-strong);
  color: var(--text-on-brand);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--brand); box-shadow: var(--shadow-md); text-decoration: none; }
.btn-primary:active { box-shadow: var(--shadow-sm); }

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border);
}
.btn-ghost:hover { border-color: var(--border-strong); color: var(--text-primary); background: var(--bg-sunken); text-decoration: none; }
.btn-ghost:active { background: var(--border); }

.btn-block { width: 100%; }

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.field label {
  font-size: var(--fs-00);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  color: var(--text-secondary);
}

.field input {
  height: 46px;
  min-height: 44px;
  padding: 0 var(--sp-4);
  background: var(--bg-sunken);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-weight: var(--fw-regular);
  transition: border-color var(--dur-med) var(--ease), background var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}

.field input:hover:not(:disabled) { border-color: var(--border-strong); }
.field input:focus {
  background: var(--bg-raised);
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
  outline: none;
}
.field input::placeholder { color: var(--text-tertiary); font-weight: var(--fw-regular); }
.field input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--bg-sunken);
}

@media (max-width: 480px) {
  .btn, .field input { height: 48px; min-height: 48px; }
}

.card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
  transition: box-shadow var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
}

/* Elevation utilities — one consistent scale for anything that
   needs to sit visually "above" the base surface (dropdowns,
   popovers, modals). Radius stays consistent with .card. */
.elevate-sm { box-shadow: var(--shadow-sm); }
.elevate-md { box-shadow: var(--shadow-md); }
.elevate-lg { box-shadow: var(--shadow-lg); }
.elevate-xl { box-shadow: var(--shadow-xl); }

.divider {
  height: 1px;
  background: var(--border);
  border: none;
  margin: var(--sp-5) 0;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-000);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--text-tertiary);
}

/* ============================================================
   BADGES / CHIPS — small status markers used inline with text,
   nav items, and cards. One consistent shape across the app.
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: 22px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: var(--fs-000);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  white-space: nowrap;
  line-height: 1;
}

.badge-neutral {
  background: var(--bg-sunken);
  color: var(--text-tertiary);
  border: 1px solid var(--border);
}

.badge-brand {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.badge-soon {
  background: transparent;
  color: var(--text-tertiary);
  border: 1px dashed var(--border-strong);
  text-transform: uppercase;
}

.badge-success { background: var(--success-soft); color: var(--success-strong); }
.badge-danger  { background: var(--danger-soft);  color: var(--danger-strong); }
.badge-warning { background: var(--warning-soft); color: var(--warning-strong); }

.skeleton {
  background: linear-gradient(90deg, var(--bg-sunken) 25%, var(--border) 37%, var(--bg-sunken) 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
  border-radius: var(--r-md);
}
@keyframes skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ============================================================
   ICON UTILITY — inline SVG (Lucide-style), inherits currentColor
   ============================================================ */
.icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-sm { width: 15px; height: 15px; }
.icon-lg { width: 22px; height: 22px; }

/* ============================================================
   THEME TOGGLE
   ============================================================ */
.theme-toggle {
  position: relative;
  width: 52px;
  height: 30px;
  border-radius: var(--r-full);
  background: var(--bg-sunken);
  border: 1.5px solid var(--border);
  padding: 3px;
  flex-shrink: 0;
  transition: border-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.theme-toggle:hover { border-color: var(--border-strong); }
.theme-toggle:focus-visible { box-shadow: var(--focus-ring); }

.theme-toggle__thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg);
  transition: transform var(--dur-med) var(--ease), background var(--dur-fast) var(--ease);
  transform: translateX(0);
}
.theme-toggle__thumb .icon { width: 12px; height: 12px; stroke-width: 2.4; }
.theme-toggle__thumb .icon-sun { display: none; }

[data-theme='dark'] .theme-toggle__thumb { transform: translateX(22px); }
[data-theme='dark'] .theme-toggle__thumb .icon-moon { display: none; }
[data-theme='dark'] .theme-toggle__thumb .icon-sun { display: block; }

/* ============================================================
   ROUTE TRANSITION (fragment fade)
   ============================================================ */
.frag-enter {
  animation: frag-in var(--dur-med) var(--ease);
}
@keyframes frag-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.app-loading-bar {
  position: fixed;
  top: 0; left: 0;
  height: 2.5px;
  width: 0%;
  background: var(--brand);
  box-shadow: 0 0 8px 0 var(--brand);
  z-index: 9999;
  transition: width var(--dur-fast) linear, opacity var(--dur-fast) linear;
}

/* ============================================================
   AVATAR CHIP
   ============================================================ */
.avatar {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-normal);
}

/* ============================================================
   VISUALLY-HIDDEN (for a11y labels without visible text)
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}