/* =============================================================
 * zoboox.css — application stylesheet
 * Requires: design-tokens.css loaded first
 * Replaces Tailwind CDN; uses design token CSS variables.
 * ============================================================= */

/* ─── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
img, svg { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; }
table { border-collapse: collapse; width: 100%; }
input, button, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ─── Base ───────────────────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* ─── Display ────────────────────────────────────────────────── */
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.block        { display: block; }
.inline-block { display: inline-block; }
.hidden       { display: none; }
.grid         { display: grid; }

/* ─── Flex ───────────────────────────────────────────────────── */
.flex-col   { flex-direction: column; }
.flex-wrap  { flex-wrap: wrap; }
.flex-1     { flex: 1 1 0%; }
.shrink-0   { flex-shrink: 0; }

.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.self-center   { align-self: center; }

/* ─── Gap ────────────────────────────────────────────────────── */
.gap-0\.5 { gap: 2px; }
.gap-1    { gap: 4px; }
.gap-1\.5 { gap: 6px; }
.gap-2    { gap: 8px; }
.gap-2\.5 { gap: 10px; }
.gap-3    { gap: 12px; }
.gap-4    { gap: 16px; }
.gap-5    { gap: 20px; }
.gap-6    { gap: 24px; }

/* ─── Grid ───────────────────────────────────────────────────── */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0,1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.col-span-2  { grid-column: span 2 / span 2; }

/* ─── Stack / dividers ───────────────────────────────────────── */
.space-y-2 > * + * { margin-top: 8px; }
.space-y-3 > * + * { margin-top: 12px; }
.space-y-4 > * + * { margin-top: 16px; }

.divide-y > * + *            { border-top: 1px solid var(--ink-50); }
.divide-slate-100 > * + *    { border-color: var(--ink-50); }

/* ─── Sizing ─────────────────────────────────────────────────── */
.w-full { width: 100%; }
.w-4   { width: 16px; }
.w-5   { width: 20px; }
.w-6   { width: 24px; }
.w-8   { width: 32px; }
.w-10  { width: 40px; }
.w-12  { width: 48px; }
.w-14  { width: 56px; }
.w-16  { width: 64px; }
.w-20  { width: 80px; }
.w-40  { width: 160px; }

.h-px  { height: 1px; }
.h-3   { height: 12px; }
.h-4   { height: 16px; }
.h-5   { height: 20px; }
.h-6   { height: 24px; }
.h-8   { height: 32px; }
.h-10  { height: 40px; }
.h-12  { height: 48px; }
.h-14  { height: 56px; }
.h-16  { height: 64px; }

.max-w-sm  { max-width: 24rem; }
.max-w-lg  { max-width: 32rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-7xl { max-width: 80rem; }

.mx-auto { margin-left: auto; margin-right: auto; }

.min-h-screen    { min-height: 100vh; }
.min-h-\[72vh\]  { min-height: 72vh; }

/* ─── Overflow ───────────────────────────────────────────────── */
.overflow-hidden  { overflow: hidden; }
.overflow-x-auto  { overflow-x: auto; }

/* ─── Position ───────────────────────────────────────────────── */
.sticky   { position: sticky; }
.relative { position: relative; }
.absolute { position: absolute; }
.top-0    { top: 0; }
.z-30     { z-index: 30; }
.-top-3   { top: -12px; }
.left-1\/2        { left: 50%; }
.-translate-x-1\/2 { transform: translateX(-50%); }

/* ─── Padding ────────────────────────────────────────────────── */
.p-1   { padding: 4px; }
.p-4   { padding: 16px; }
.p-5   { padding: 20px; }
.p-6   { padding: 24px; }
.p-8   { padding: 32px; }

.px-2    { padding-left: 8px;  padding-right: 8px; }
.px-2\.5 { padding-left: 10px; padding-right: 10px; }
.px-3    { padding-left: 12px; padding-right: 12px; }
.px-4    { padding-left: 16px; padding-right: 16px; }
.px-5    { padding-left: 20px; padding-right: 20px; }
.px-6    { padding-left: 24px; padding-right: 24px; }

.py-0\.5 { padding-top: 2px;  padding-bottom: 2px; }
.py-1    { padding-top: 4px;  padding-bottom: 4px; }
.py-1\.5 { padding-top: 6px;  padding-bottom: 6px; }
.py-2    { padding-top: 8px;  padding-bottom: 8px; }
.py-2\.5 { padding-top: 10px; padding-bottom: 10px; }
.py-3    { padding-top: 12px; padding-bottom: 12px; }
.py-3\.5 { padding-top: 14px; padding-bottom: 14px; }
.py-4    { padding-top: 16px; padding-bottom: 16px; }
.py-5    { padding-top: 20px; padding-bottom: 20px; }
.py-6    { padding-top: 24px; padding-bottom: 24px; }
.py-8    { padding-top: 32px; padding-bottom: 32px; }
.py-10   { padding-top: 40px; padding-bottom: 40px; }
.py-12   { padding-top: 48px; padding-bottom: 48px; }
.py-16   { padding-top: 64px; padding-bottom: 64px; }
.py-20   { padding-top: 80px; padding-bottom: 80px; }

.pt-4  { padding-top: 16px; }
.pb-2  { padding-bottom: 8px; }

/* ─── Margin ─────────────────────────────────────────────────── */
.mt-0\.5 { margin-top: 2px; }
.mt-1    { margin-top: 4px; }
.mt-1\.5 { margin-top: 6px; }
.mt-2    { margin-top: 8px; }
.mt-3    { margin-top: 12px; }
.mt-4    { margin-top: 16px; }
.mt-5    { margin-top: 20px; }
.mt-6    { margin-top: 24px; }
.mt-8    { margin-top: 32px; }
.mt-10   { margin-top: 40px; }

.mb-0\.5 { margin-bottom: 2px; }
.mb-1    { margin-bottom: 4px; }
.mb-1\.5 { margin-bottom: 6px; }
.mb-2    { margin-bottom: 8px; }
.mb-3    { margin-bottom: 12px; }
.mb-4    { margin-bottom: 16px; }
.mb-5    { margin-bottom: 20px; }
.mb-6    { margin-bottom: 24px; }
.mb-7    { margin-bottom: 28px; }
.mb-8    { margin-bottom: 32px; }

.ml-1 { margin-left: 4px; }
.ml-2 { margin-left: 8px; }
.mr-2 { margin-right: 8px; }

/* ─── Typography ─────────────────────────────────────────────── */
.text-xs   { font-size: var(--text-xs);   line-height: 1.4; }
.text-sm   { font-size: var(--text-sm);   line-height: 1.5; }
.text-base { font-size: var(--text-base); line-height: 1.5; }
.text-lg   { font-size: var(--text-lg);   line-height: 1.4; }
.text-xl   { font-size: var(--text-xl);   line-height: 1.3; }
.text-2xl  { font-size: var(--text-2xl);  line-height: 1.3; }
.text-3xl  { font-size: var(--text-3xl);  line-height: 1.2; }
.text-4xl  { font-size: var(--text-4xl);  line-height: 1.1; }

.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

.font-mono { font-family: var(--font-mono); }
.tabular-nums { font-variant-numeric: tabular-nums; }

.uppercase     { text-transform: uppercase; }
.text-center   { text-align: center; }
.text-right    { text-align: right; }
.text-left     { text-align: left; }

.tracking-wide   { letter-spacing: 0.025em; }
.tracking-widest { letter-spacing: 0.1em; }
.tracking-\[0\.5em\] { letter-spacing: 0.5em; }
.leading-none    { line-height: 1; }
.antialiased     { -webkit-font-smoothing: antialiased; }

.truncate       { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.break-anywhere { overflow-wrap: anywhere; word-break: break-word; }

/* ─── Colors — text ──────────────────────────────────────────── */
.text-white     { color: #fff; }
.text-slate-900 { color: var(--ink-900); }
.text-slate-800 { color: var(--ink-800); }
.text-slate-700 { color: var(--ink-700); }
.text-slate-600 { color: var(--ink-600); }
.text-slate-500 { color: var(--ink-500); }
.text-slate-400 { color: var(--ink-400); }
.text-slate-300 { color: var(--ink-300); }

.text-blue-600  { color: var(--primary-500); }
.text-blue-700  { color: var(--primary-700); }
.text-blue-800  { color: var(--primary-800); }
.text-blue-200  { color: var(--primary-200); }
.text-blue-300  { color: var(--primary-300); }
.text-blue-100  { color: var(--primary-100); }

.text-emerald-500 { color: var(--accent-500); }
.text-emerald-600 { color: var(--accent-500); }
.text-emerald-700 { color: var(--accent-700); }
.text-emerald-800 { color: #005140; }

.text-red-500   { color: var(--danger); }
.text-red-600   { color: var(--danger); }
.text-red-700   { color: #a82f24; }
.text-red-800   { color: #8a2219; }
.text-red-400   { color: #d45f53; }

.text-amber-500 { color: var(--warning); }
.text-amber-700 { color: #9e6f12; }
.text-amber-800 { color: #7a5510; }
.text-amber-900 { color: #5b3e0c; }

.text-violet-600 { color: #7c3aed; }
.text-violet-700 { color: #6d28d9; }

/* ─── Colors — background ────────────────────────────────────── */
.bg-white     { background: #fff; }
.bg-slate-50  { background: var(--canvas); }
.bg-slate-100 { background: var(--ink-50); }
.bg-slate-200 { background: var(--ink-100); }
.bg-slate-800 { background: var(--ink-800); }
.bg-slate-900 { background: var(--ink-900); }

.bg-blue-50   { background: var(--primary-50); }
.bg-blue-100  { background: var(--primary-100); }
.bg-blue-600  { background: var(--primary-500); }
.bg-blue-700  { background: var(--primary-700); }

.bg-emerald-50  { background: var(--accent-50); }
.bg-emerald-100 { background: var(--accent-50); }
.bg-emerald-600 { background: var(--accent-500); }
.bg-emerald-700 { background: var(--accent-700); }

.bg-red-50    { background: var(--danger-bg); }
.bg-red-100   { background: var(--danger-bg); }
.bg-red-600   { background: var(--danger); }

.bg-amber-50  { background: var(--warning-bg); }
.bg-amber-100 { background: var(--warning-bg); }
.bg-amber-400 { background: #f59e0b; }

.bg-violet-100 { background: #ede9fe; }
.bg-violet-600 { background: #7c3aed; }
.bg-violet-700 { background: #6d28d9; }

/* opacity modifiers */
.bg-slate-50\/60  { background: rgba(247,248,250,0.6); }
.bg-red-50\/30    { background: rgba(251,233,230,0.3); }
.bg-red-50\/40    { background: rgba(251,233,230,0.4); }
.bg-blue-50\/40   { background: rgba(232,241,252,0.4); }

/* ─── Colors — border ────────────────────────────────────────── */
.border        { border: 1px solid var(--border); }
.border-0      { border: 0; }
.border-2      { border: 2px solid var(--border); }
.border-t      { border-top: 1px solid var(--border); }
.border-b      { border-bottom: 1px solid var(--border); }

.border-slate-100 { border-color: var(--ink-50); }
.border-slate-200 { border-color: var(--ink-100); }
.border-slate-300 { border-color: var(--ink-200); }

.border-blue-200  { border-color: var(--primary-200); }
.border-blue-300  { border-color: var(--primary-300); }
.border-blue-600  { border-color: var(--primary-500); }

.border-emerald-200 { border-color: var(--accent-200); }
.border-emerald-300 { border-color: var(--accent-200); }

.border-red-100   { border-color: #f2c4bc; }
.border-red-200   { border-color: var(--danger-border); }
.border-red-300   { border-color: #e08e82; }
.border-amber-200 { border-color: var(--warning-border); }

.border-dashed  { border-style: dashed; }

/* ─── Border radius ──────────────────────────────────────────── */
.rounded      { border-radius: 4px; }
.rounded-md   { border-radius: var(--radius-sm); }
.rounded-lg   { border-radius: var(--radius-sm); }
.rounded-xl   { border-radius: var(--radius-md); }
.rounded-2xl  { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-pill); }

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

/* ─── Transitions ────────────────────────────────────────────── */
.transition-colors {
  transition: color var(--dur-base) var(--ease-quiet),
              background-color var(--dur-base) var(--ease-quiet),
              border-color var(--dur-base) var(--ease-quiet),
              box-shadow var(--dur-base) var(--ease-quiet);
}
.transition-all       { transition: all var(--dur-base) var(--ease-quiet); }
.transition-transform { transition: transform var(--dur-base) var(--ease-quiet); }

/* ─── Hover ──────────────────────────────────────────────────── */
.hover\:bg-slate-50:hover    { background: var(--bg-hover); }
.hover\:bg-slate-100:hover   { background: var(--ink-50); }
.hover\:bg-slate-700:hover   { background: var(--ink-700); }
.hover\:bg-slate-50\/60:hover { background: rgba(247,248,250,0.6); }
.hover\:text-slate-700:hover  { color: var(--ink-700); }
.hover\:text-slate-800:hover  { color: var(--ink-800); }
.hover\:text-slate-900:hover  { color: var(--ink-900); }
.hover\:bg-blue-50:hover     { background: var(--primary-50); }
.hover\:bg-blue-600:hover    { background: var(--primary-500); }
.hover\:bg-blue-700:hover    { background: var(--primary-700); }
.hover\:bg-blue-50\/40:hover { background: rgba(232,241,252,0.4); }
.hover\:text-white:hover     { color: #fff; }
.hover\:border-blue-200:hover  { border-color: var(--primary-200); }
.hover\:border-blue-300:hover  { border-color: var(--primary-300); }
.hover\:border-slate-300:hover { border-color: var(--ink-200); }
.hover\:bg-emerald-50:hover  { background: var(--accent-50); }
.hover\:bg-emerald-700:hover { background: var(--accent-700); }
.hover\:bg-red-600:hover     { background: var(--danger); }
.hover\:text-red-700:hover   { color: #a82f24; }
.hover\:bg-violet-50:hover   { background: #f5f3ff; }
.hover\:text-violet-700:hover { color: #6d28d9; }
.hover\:shadow-md:hover      { box-shadow: var(--shadow-md); }
.hover\:underline:hover      { text-decoration: underline; }

/* group hover */
.group:hover .group-hover\:bg-blue-600 { background: var(--primary-500); }

/* ─── Focus ──────────────────────────────────────────────────── */
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}
.focus\:outline-none:focus { outline: none; }
.focus\:border-blue-500:focus { border-color: var(--border-focus); }
.focus\:border-violet-500:focus { border-color: #7c3aed; }
.focus\:ring-2:focus { /* defined via ring color below */ }
.focus\:ring-blue-500\/20:focus   { box-shadow: var(--shadow-focus); }
.focus\:ring-violet-500\/20:focus { box-shadow: 0 0 0 3px rgba(124,58,237,0.22); }

/* ─── Ring (status badges) ───────────────────────────────────── */
.ring-1 { }
.ring-inset { }
.ring-1.ring-inset.ring-emerald-600\/20 {
  box-shadow: inset 0 0 0 1px rgba(0,133,94,0.2);
}
.ring-1.ring-inset.ring-red-600\/20 {
  box-shadow: inset 0 0 0 1px rgba(192,56,43,0.2);
}
.ring-1.ring-inset.ring-amber-600\/20 {
  box-shadow: inset 0 0 0 1px rgba(184,131,23,0.2);
}
.ring-1.ring-inset.ring-slate-500\/20 {
  box-shadow: inset 0 0 0 1px rgba(111,115,133,0.2);
}

/* ─── Animations ─────────────────────────────────────────────── */
@keyframes zb-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}
@keyframes zb-spin {
  to { transform: rotate(360deg); }
}
.animate-pulse { animation: zb-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }
.animate-spin  { animation: zb-spin 1s linear infinite; }
.opacity-25 { opacity: 0.25; }
.opacity-75 { opacity: 0.75; }

/* ─── Misc helpers ───────────────────────────────────────────── */
.cursor-pointer { cursor: pointer; }
.select-none    { user-select: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border-width: 0;
}

/* ─── Placeholder ───────────────────────────────────────────── */
.placeholder\:text-slate-400::placeholder { color: var(--ink-400); }
.placeholder\:text-slate-300::placeholder { color: var(--ink-300); }

/* ─── Lucide icons ───────────────────────────────────────────── */
[data-lucide] {
  display: inline-block;
  width: 16px; height: 16px;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vertical-align: middle;
  flex-shrink: 0;
}
.icon-md [data-lucide], [data-lucide].icon-md { width: 20px; height: 20px; }
.icon-lg [data-lucide], [data-lucide].icon-lg { width: 24px; height: 24px; }

/* ─── Responsive ─────────────────────────────────────────────── */
@media (min-width: 640px) {
  .sm\:block        { display: block; }
  .sm\:px-6         { padding-left: 24px; padding-right: 24px; }
  .sm\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sm\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .sm\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .sm\:col-span-1   { grid-column: span 1 / span 1; }
}

@media (min-width: 1024px) {
  .lg\:px-8                        { padding-left: 32px; padding-right: 32px; }
  .lg\:grid-cols-\[300px_1fr\]     { grid-template-columns: 300px 1fr; }
  .lg\:grid-cols-1                 { grid-template-columns: repeat(1, minmax(0,1fr)); }
}

@media (min-width: 1280px) {
  .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}