/* ===========================================================================
   Onlipr Design System v1.0
   Press wire dashboard — brand colors: #ffd50b (yellow) + #1d1d1d (ink)
   =========================================================================== */

/* ---------- TOKENS ---------- */
:root {
  /* brand */
  --yellow:        #ffd50b;
  --yellow-700:    #d9b400;   /* edge / pressed */
  --yellow-300:    #ffe14a;   /* hover bright */
  --yellow-100:    #fff3a8;   /* soft surface */
  --yellow-50:     #fffbe0;   /* tint background */

  /* ink scale (light theme) */
  --ink:           #1d1d1d;   /* primary text */
  --ink-2:         #2a2a2a;
  --ink-3:         #4a4a48;
  --ink-4:         #7a7a76;
  --ink-5:         #a8a8a3;

  /* surfaces */
  --bg:            #fafaf7;   /* page background */
  --bg-2:          #f3f3ef;   /* subtle fill */
  --card:          #ffffff;
  --line:          #ececea;
  --line-2:        #e5e5e2;

  /* semantic */
  --good:          #15803d;
  --bad:           #b91c1c;
  --warn:          #b45309;
  --info:          #1e40af;

  /* radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --r-xl: 18px;

  /* shadows */
  --sh-1: 0 1px 0 rgba(29,29,29,0.04);
  --sh-2: 0 1px 2px rgba(29,29,29,0.06), 0 1px 0 rgba(29,29,29,0.02);
  --sh-3: 0 4px 14px -4px rgba(29,29,29,0.10), 0 1px 2px rgba(29,29,29,0.04);
  --sh-brand: 0 1px 0 var(--yellow-700), 0 2px 6px -2px rgba(217,180,0,0.4);

  /* spacing scale (use as multiples of 4) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  /* layout vars (overridable) */
  --pad: 20px;
  --gap: 16px;
  --sidebar-w: 232px;

  /* motion */
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 280ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* dark theme override */
html[data-theme="dark"] {
  --ink:    #f4f4ef;
  --ink-2:  #e4e4df;
  --ink-3:  #c4c4bd;
  --ink-4:  #8a8a85;
  --ink-5:  #5a5a55;
  --line:   #2a2a28;
  --line-2: #353532;
  --bg:     #141413;
  --bg-2:   #1d1d1c;
  --card:   #1d1d1c;
  --good:   #4ade80;
  --bad:    #f87171;
  --warn:   #fbbf24;
  --info:   #93c5fd;
  --sh-1: 0 1px 0 rgba(0,0,0,0.3);
  --sh-2: 0 1px 2px rgba(0,0,0,0.4);
  --sh-3: 0 4px 14px -4px rgba(0,0,0,0.5);
}

/* density */
html[data-density="compact"] { --pad: 14px; --gap: 12px; }

/* sidebar width */
html[data-sidebar="wide"]   { --sidebar-w: 260px; }
html[data-sidebar="narrow"] { --sidebar-w: 200px; }

/* ---------- BASE ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.mono { font-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; font-feature-settings: "tnum" 1; }
.serif { font-family: "Instrument Serif", "Times New Roman", serif; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; border-radius: 4px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-5); }

/* ---------- TYPE ---------- */
.t-display { font-size: 48px; line-height: 1.05; letter-spacing: -0.035em; font-weight: 600; }
.t-h1      { font-size: 32px; line-height: 1.1;  letter-spacing: -0.03em;  font-weight: 600; }
.t-h2      { font-size: 24px; line-height: 1.15; letter-spacing: -0.025em; font-weight: 600; }
.t-h3      { font-size: 18px; line-height: 1.2;  letter-spacing: -0.015em; font-weight: 600; }
.t-h4      { font-size: 15px; line-height: 1.25; letter-spacing: -0.01em;  font-weight: 600; }
.t-body    { font-size: 14px; line-height: 1.5; }
.t-sm      { font-size: 13px; line-height: 1.45; }
.t-xs      { font-size: 12px; line-height: 1.4; color: var(--ink-4); }
.t-eyebrow { font-size: 11px; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--ink-4); font-family: "Geist Mono", monospace; }
.muted     { color: var(--ink-4); }

/* ---------- LAYOUT ---------- */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.between { justify-content: space-between; }
.gap-4{gap:4px} .gap-6{gap:6px} .gap-8{gap:8px} .gap-10{gap:10px} .gap-12{gap:12px} .gap-16{gap:16px} .gap-20{gap:20px} .gap-24{gap:24px}
.hairline   { border-top: 1px solid var(--line); }
.hairline-b { border-bottom: 1px solid var(--line); }

/* ---------- CARD ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.card.elev { box-shadow: var(--sh-2); }

/* ---------- PILL / BADGE ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--ink-3);
  white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; border-radius: 99px; background: var(--ink-4); }
.pill.good { color: var(--good); background: color-mix(in oklab, var(--good) 8%, var(--card)); border-color: color-mix(in oklab, var(--good) 22%, var(--line)); }
.pill.good .dot { background: var(--good); }
.pill.warn { color: var(--warn); background: color-mix(in oklab, var(--warn) 10%, var(--card)); border-color: color-mix(in oklab, var(--warn) 25%, var(--line)); }
.pill.warn .dot { background: var(--warn); }
.pill.bad  { color: var(--bad);  background: color-mix(in oklab, var(--bad)  8%, var(--card)); border-color: color-mix(in oklab, var(--bad)  22%, var(--line)); }
.pill.bad .dot  { background: var(--bad); }
.pill.info { color: var(--info); background: color-mix(in oklab, var(--info) 8%, var(--card)); border-color: color-mix(in oklab, var(--info) 22%, var(--line)); }
.pill.info .dot { background: var(--info); }
.pill.brand{ color: var(--ink);  background: var(--yellow-50); border-color: color-mix(in oklab, var(--yellow) 55%, var(--line)); }
.pill.brand .dot{ background: var(--yellow); border: 1px solid var(--yellow-700); }

/* ---------- BUTTON ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--line-2);
  background: var(--card);
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform 40ms var(--ease);
  white-space: nowrap;
  font-family: inherit;
}
.btn:hover { background: var(--bg-2); border-color: var(--ink-5); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--bg-2); }
.btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.primary:hover { background: #000; }
html[data-theme="dark"] .btn.primary { background: var(--yellow); color: #1d1d1d; border-color: var(--yellow); }
html[data-theme="dark"] .btn.primary:hover { background: var(--yellow-300); }
.btn.brand   { background: var(--yellow); color: var(--ink); border-color: var(--yellow-700); box-shadow: var(--sh-brand); }
.btn.brand:hover { background: var(--yellow-300); }
.btn.danger  { background: var(--bad); color: #fff; border-color: var(--bad); }
.btn.icon    { padding: 6px; }
.btn.lg      { padding: 9px 16px; font-size: 14px; border-radius: 10px; }
.btn.sm      { padding: 4px 9px; font-size: 12px; }

/* ---------- INPUT ---------- */
.input {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink-3);
  font-size: 13px;
  min-width: 0;
}
.input:focus-within { border-color: var(--ink-3); box-shadow: 0 0 0 3px color-mix(in oklab, var(--yellow) 35%, transparent); }
.input input, .input textarea {
  border: 0; outline: 0; background: transparent;
  font: inherit; color: var(--ink); flex: 1; min-width: 0; padding: 0;
  resize: none;
}
.input input::placeholder, .input textarea::placeholder { color: var(--ink-4); }
.input.lg { padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.field-label { font-size: 12.5px; font-weight: 500; color: var(--ink-2); display: block; margin-bottom: 6px; }
.field-help  { font-size: 12px; color: var(--ink-4); margin-top: 6px; }

/* ---------- KBD ---------- */
.kbd {
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  color: var(--ink-4);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 5px;
  line-height: 1;
}

/* ---------- TABS ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.tab  {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--ink-4);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
  font-weight: 500;
}
.tab:hover { color: var(--ink-2); }
.tab.active { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- TABLE ---------- */
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data thead th {
  text-align: left;
  font-weight: 500;
  color: var(--ink-4);
  font-size: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  white-space: nowrap;
}
table.data tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.data tbody tr:hover td { background: var(--bg-2); cursor: pointer; }
table.data tbody tr:last-child td { border-bottom: 0; }

/* ---------- AVATAR ---------- */
.avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12px;
  border: 1px solid var(--yellow-700);
  flex: 0 0 28px;
}
.avatar.sm { width: 22px; height: 22px; font-size: 10.5px; flex: 0 0 22px; }
.avatar.lg { width: 40px; height: 40px; font-size: 14px; flex: 0 0 40px; }
.avatar.neutral { background: var(--bg-2); color: var(--ink-2); border-color: var(--line); }

/* ---------- NAV ITEM ---------- */
.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: 7px;
  color: var(--ink-3);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  line-height: 1.2;
}
.nav-item .ni-icon { width: 16px; height: 16px; color: var(--ink-4); flex: 0 0 16px; }
.nav-item:hover { background: var(--bg-2); color: var(--ink); }
.nav-item.active { color: var(--ink); background: var(--bg-2); }
.nav-item.active .ni-icon { color: var(--ink); }
.nav-item.active::before {
  content: ""; position: absolute;
  left: -8px; top: 6px; bottom: 6px;
  width: 3px; background: var(--yellow); border-radius: 0 3px 3px 0;
}
.nav-section-label {
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink-5);
  font-weight: 600;
  padding: 14px 10px 6px;
  font-family: "Geist Mono", monospace;
}
.nav-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-4);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 6px;
  line-height: 1.4;
}
.nav-item.active .nav-count {
  background: var(--yellow-50);
  border-color: color-mix(in oklab, var(--yellow) 60%, var(--line));
  color: var(--ink-2);
}

/* ---------- ENV TOGGLE (test/live) ---------- */
.env {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 3px 10px 3px 6px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 500;
}
.env .toggle {
  width: 26px; height: 14px; background: var(--ink); border-radius: 99px; position: relative;
}
.env .toggle::after {
  content: ""; position: absolute; top: 1px; left: 1px;
  width: 12px; height: 12px; background: var(--yellow); border-radius: 99px;
  transition: left var(--t-base) var(--ease);
}
.env[data-on="live"] .toggle::after { left: 13px; }

/* ---------- IMAGE SLOT (placeholder) ---------- */
.img-slot {
  background:
    repeating-linear-gradient(135deg, var(--bg-2) 0 6px, var(--bg) 6px 12px);
  border: 1px dashed var(--line-2);
  color: var(--ink-4);
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  text-align: center;
}

/* ---------- BANNER ---------- */
.banner {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--r);
  padding: 12px 14px;
  display: flex; gap: 12px; align-items: flex-start;
}
.banner.brand { background: var(--yellow-50); border-color: color-mix(in oklab, var(--yellow) 50%, var(--line)); }
.banner.info  { background: color-mix(in oklab, var(--info) 6%, var(--card)); border-color: color-mix(in oklab, var(--info) 20%, var(--line)); }
.banner.warn  { background: color-mix(in oklab, var(--warn) 10%, var(--card)); border-color: color-mix(in oklab, var(--warn) 28%, var(--line)); }
.banner.bad   { background: color-mix(in oklab, var(--bad) 8%, var(--card));  border-color: color-mix(in oklab, var(--bad) 22%, var(--line)); }

/* ---------- ANIMATION ---------- */
@keyframes brandPulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--yellow) 60%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--yellow) 0%, transparent); } }
.pulse-dot { animation: brandPulse 2.2s ease-in-out infinite; }

/* ---------- CHECKBOX (yellow accent) ---------- */
.cb {
  appearance: none;
  width: 14px; height: 14px;
  border: 1.5px solid var(--ink-4);
  border-radius: 3px;
  background: var(--card);
  cursor: pointer;
  position: relative;
  flex: 0 0 14px;
}
.cb:checked {
  background: var(--yellow);
  border-color: var(--yellow-700);
}
.cb:checked::after {
  content: "";
  position: absolute; left: 3px; top: 0px;
  width: 5px; height: 9px;
  border: solid var(--ink);
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg);
}

/* ---------- swatch (doc) ---------- */
.swatch {
  border-radius: 10px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--card);
}
.swatch .chip { aspect-ratio: 4/3; }
.swatch .meta { padding: 10px 12px; }
.swatch .meta .name { font-weight: 500; font-size: 13px; }
.swatch .meta .val  { font-family: "Geist Mono", monospace; font-size: 11px; color: var(--ink-4); margin-top: 2px; }

/* Inline icon (16px viewBox SVGs with currentColor) */
.ico {
  width: 14px; height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 14px;
}
.ico.lg { width: 18px; height: 18px; flex: 0 0 18px; }
.ico.sm { width: 12px; height: 12px; flex: 0 0 12px; }
.ni-icon { width: 16px; height: 16px; flex: 0 0 16px; }

/* Code chip */
.code {
  font-family: "Geist Mono", monospace;
  font-size: 11.5px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
  color: var(--ink-3);
}

/* ---------- CHROME (sidebar + topbar shell) ---------- */
.chrome-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}
.chrome-sidebar {
  position: sticky; top: 0; height: 100vh;
  border-right: 1px solid var(--line);
  background: var(--bg);
  padding: 16px 14px;
  display: flex; flex-direction: column; gap: 4px;
  overflow-y: auto;
}
.chrome-brand {
  display: flex; gap: 10px; align-items: center;
  padding: 4px 6px 12px;
  color: var(--ink);
}
.ws-switcher {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  font-size: 13px;
}
.ws-switcher:hover { background: var(--bg-2); }
.chrome-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }

.chrome-topbar {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--line);
}

.page-header {
  padding: 18px 28px 14px;
}
.page-header h1 {
  margin: 0; font-size: 26px; font-weight: 600;
  letter-spacing: -0.025em; line-height: 1.15;
}
.crumbs {
  display: flex; gap: 6px; align-items: center;
  margin-bottom: 6px;
  color: var(--ink-4); font-size: 12px;
}
.crumbs .sep { color: var(--ink-5); }
.crumbs .here { color: var(--ink-2); }

.page-body {
  padding: 20px 28px 48px;
  display: flex; flex-direction: column;
  gap: var(--gap);
}