/* ============================================================
   VavaStone Portal 3 — Global tokens & shared components
   Palette extracted verbatim from html/samples/design-v3/
   Radius capped at 4px per project rule (memory: max-border-radius).
   ============================================================ */

:root {
  /* Vault palette */
  --bg:     #ffffff;   /* page canvas — white */
  --bg-2:   #ecebe6;
  --paper:  #ffffff;
  --chrome: #f1f1f1;   /* topbar + sidebar surfaces — light gray */
  --ink:    #14161a;
  --ink-2:  #383c42;
  --muted:  #7a7e85;
  --line:   #c5c5c4;
  --line-2: #ecebe6;
  --accent:  #0e7ed3;
  --accent-ink: #ffffff;
  --good:    #0e7ed3;   /* Available — blue (same as accent) */
  --transit: #6db5e6;   /* Transit — lighter blue */
  --assigned:#e8821f;   /* Assigned / Reserved — orange */
  --paid:    #44a06a;   /* Paid — green */
  --warn:    #a66a1c;
  --bad:     #9c2d27;
  --hold:    #a66a1c;
  --res:     #e8821f;   /* Reserved — orange (same as Assigned) */

  /* Radii (capped at 4px) */
  --radius:    4px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-pill: 4px;

  /* Typography */
  --font-display: "Aptos Display", "Aptos", "Nunito", "Söhne", "Inter", sans-serif;
  --font-body:    "Aptos", "Nunito", "Söhne", "Inter", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Surfaces */
  --shadow: 0 1px 2px rgba(20,22,26,0.04), 0 8px 24px -14px rgba(20,22,26,0.12);

  /* Layout */
  --sidebar-w-extended: 158px;
  --sidebar-w-minimized: 56px;
  --topbar-h: 56px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }
input, select, textarea { font: inherit; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
  font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: border-color .12s, background .12s;
}
.btn:hover { border-color: var(--ink-2); }
.btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn--primary:hover { background: #0a68b0; border-color: #0a68b0; }
.btn--sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--bg-2); }
.btn--icon { width: 34px; padding: 0; justify-content: center; }
.btn .ico { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* ---------- Chips (filter pills) ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: transparent; color: var(--ink-2);
  font-size: 12px; cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.chip:hover { background: var(--bg-2); }
.chip[aria-pressed="true"] {
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  color: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 35%, transparent);
  font-weight: 600;
}
.chip .ct { font-family: var(--font-mono); font-size: 12px; opacity: 0.7; }

/* ---------- Segmented control ---------- */
.seg {
  display: inline-flex;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--bg-2);
}
.seg > button {
  height: 28px; padding: 0 12px;
  font-size: 12px;
  background: transparent; border: 0; border-right: 1px solid var(--line);
  color: var(--muted); cursor: pointer;
}
.seg > button:last-child { border-right: 0; }
.seg > button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }

.divider-v { width: 1px; height: 18px; background: var(--line); display: inline-block; }
.spacer-x { flex: 1; }

/* ---------- Pills (status) ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.02em;
  color: var(--muted);
  white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; border-radius: var(--radius); background: currentColor; }
.pill--good     { color: var(--good);    background: color-mix(in oklab, var(--good) 8%, transparent);    border-color: color-mix(in oklab, var(--good) 25%, transparent); }
.pill--hold     { color: var(--hold);    background: color-mix(in oklab, var(--hold) 8%, transparent);    border-color: color-mix(in oklab, var(--hold) 25%, transparent); }
.pill--transit  { color: var(--transit); background: color-mix(in oklab, var(--transit) 8%, transparent); border-color: color-mix(in oklab, var(--transit) 25%, transparent); }
.pill--assigned { color: var(--assigned); background: color-mix(in oklab, var(--assigned) 8%, transparent); border-color: color-mix(in oklab, var(--assigned) 25%, transparent); }
.pill--paid     { color: var(--paid);    background: color-mix(in oklab, var(--paid) 8%, transparent);    border-color: color-mix(in oklab, var(--paid) 25%, transparent); }
.pill--res      { color: var(--assigned); background: color-mix(in oklab, var(--assigned) 8%, transparent); border-color: color-mix(in oklab, var(--assigned) 25%, transparent); }
.pill--bad      { color: var(--bad);     background: color-mix(in oklab, var(--bad) 8%, transparent);     border-color: color-mix(in oklab, var(--bad) 25%, transparent); }
.pill--solid    { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- Kicker / labels ---------- */
.kicker {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Swatch (stone tile) ---------- */
.swatch {
  background-color: var(--sw-bg, var(--bg-2));
  background-image: var(--sw-img, none);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  position: relative;
}

/* ---------- Scroll polish ---------- */
.scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--radius); }
.scroll::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ---------- Cards ---------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.card-h {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 10px;
}
.card-h h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600;
}
.card-body { padding: 14px 16px; }

/* ---------- KV grid ---------- */
.kv {
  display: grid; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  grid-template-columns: repeat(2, 1fr);
}
.kv.kv-3 { grid-template-columns: repeat(3, 1fr); }
.kv.kv-4 { grid-template-columns: repeat(4, 1fr); }
.kv > div {
  background: var(--paper);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.kv .k {
  font-family: var(--font-mono);
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted);
}
.kv .v { font-size: 13.5px; font-weight: 500; }
.kv .v.big {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700; letter-spacing: -0.015em; line-height: 1;
}
.kv .v small {
  font-family: var(--font-mono); font-size: 12px;
  font-weight: 400; color: var(--muted);
}