/* ============================================================
   LOCUS STANDI · Paper Book Builder · shared design system
   Palette: warm-orange accent, neutral ink, warm canvas.
   Aligned to docuswift-ui's brand: Inter + JetBrains Mono, #e0742f accent.
   ============================================================ */

:root{
  /* === palette (source of truth) === */
  --accent:#e0742f; --accent-deep:#b8531a;
  --accent-gradient:linear-gradient(135deg,#e0742f,#b8531a);
  --accent-soft:#fff4ec; --accent-soft-2:#fdf0e6;
  --accent-line:#f6b98a; --accent-line-2:#ffd9bf;
  --accent-shadow:rgba(224,116,47,.25);

  --ink-900:#101828; --ink-700:#344054; --ink-500:#667085; --ink-400:#98a2b3;

  --surface:#ffffff; --surface-wash:#f4f6f8; --surface-wash-2:#f9fafb;
  --hairline:#e4e7ec; --hairline-soft:#f2f4f7;

  --success:#16a34a; --success-bg:#f0fdf4; --success-line:#bbf7d0;
  --danger:#b42318;  --danger-bg:#fef3f2;  --danger-line:#fda29b;
  --amber:#f59e0b;   --amber-bg:#fffbeb;   --amber-line:#fde68a; --amber-text:#b45309;
  --purple:#7c3aed;  --purple-bg:#f5f0ff;

  /* === aliases to names used across the mockups === */
  --bg:var(--surface-wash); --bg-2:var(--surface-wash-2); --card:var(--surface);
  --tint:var(--accent-soft); --warm:var(--accent-soft-2);
  --ink:var(--ink-900); --ink-soft:var(--ink-700); --ink-faint:var(--ink-500); --ink-ghost:var(--ink-400);
  --line:var(--hairline); --line-2:#dde1e8; --line-3:#cbd0d9;
  --blue:var(--accent); --blue-deep:var(--accent-deep); --blue-tint:var(--accent-soft); --blue-tint-2:var(--accent-soft-2);
  --orange:var(--accent); --orange-deep:var(--accent-deep); --orange-tint:var(--accent-soft); --orange-tint-2:var(--accent-line-2);
  --green:var(--success); --green-tint:var(--success-bg);
  --grad:var(--accent-gradient);

  --r-sm:8px; --r:11px; --r-lg:14px; --r-xl:20px;

  --sh-1:0 1px 2px rgba(16,24,40,.05), 0 1px 1px rgba(16,24,40,.04);
  --sh-2:0 8px 20px -10px rgba(16,24,40,.16), 0 2px 6px -2px rgba(16,24,40,.08);
  --sh-3:0 28px 56px -22px rgba(16,24,40,.24), 0 8px 20px -12px rgba(16,24,40,.14);
  --sh-paper:0 1px 3px rgba(16,24,40,.10), 0 18px 36px -20px rgba(16,24,40,.22);

  --sans:"Inter", system-ui, -apple-system, sans-serif;
  --head:"Inter", system-ui, -apple-system, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:linear-gradient(135deg,#faf9f7 0%, #f1efec 100%);
  background-attachment:fixed;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{ font-family:var(--head); font-weight:700; letter-spacing:-.02em; color:var(--ink); margin:0; line-height:1.12; }
p{ margin:0; }
a{ color:var(--accent-deep); text-underline-offset:3px; }

.mono{ font-family:var(--mono); font-feature-settings:"tnum" 1; }
.eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-deep); font-weight:600; }
.muted{ color:var(--ink-faint); }
.tiny{ font-size:12.5px; }

/* ---------- buttons ---------- */
.btn{
  font-family:var(--sans); font-size:14px; font-weight:600;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:var(--r-sm);
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink);
  cursor:pointer; transition:.15s ease; box-shadow:var(--sh-1); text-decoration:none;
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--sh-2); border-color:var(--line-3); }
.btn:active{ transform:translateY(0); }
.btn--primary{ background:var(--grad); border:none; color:#fff; box-shadow:0 1px 2px rgba(16,24,40,.12); }
.btn--primary:hover{ box-shadow:0 8px 18px -6px var(--accent-shadow); filter:brightness(1.03); }
.btn--ghost{ background:transparent; box-shadow:none; border-color:transparent; }
.btn--ghost:hover{ background:var(--accent-soft); box-shadow:none; }
.btn--quiet{ background:var(--surface-wash-2); }
.btn--sm{ padding:7px 12px; font-size:13px; gap:6px; }
.btn--lg{ padding:13px 22px; font-size:15px; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.btn .ic{ width:16px; height:16px; }

/* ---------- brand mark ---------- */
.mark{ color:var(--ink); display:inline-flex; }
.mark svg{ display:block; }
.wordmark{ font-family:var(--head); font-weight:800; letter-spacing:.01em; font-size:16px; color:var(--ink); line-height:1; }
.wordmark small{ display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); font-weight:500; margin-top:3px; }

/* ---------- chips ---------- */
.chip{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface-wash-2); color:var(--ink-soft); }
.chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); }
.chip--blue, .chip--accent, .chip--orange{ background:var(--accent-soft); color:var(--accent-deep); border-color:var(--accent-line); }
.chip--blue .dot, .chip--accent .dot, .chip--orange .dot{ background:var(--accent); }
.chip--green{ background:var(--success-bg); color:#15803d; border-color:var(--success-line); } .chip--green .dot{ background:var(--success); }
.chip--purple{ background:var(--purple-bg); color:var(--purple); border-color:#e4d6ff; } .chip--purple .dot{ background:var(--purple); }
.chip--mono{ font-family:var(--mono); font-weight:500; }

/* ---------- panels ---------- */
.panel{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); box-shadow:var(--sh-1); }
.panel--pad{ padding:22px; }
.hr{ height:1px; background:var(--hairline); border:0; margin:0; }

/* ---------- toggle ---------- */
.switch{ position:relative; display:inline-block; width:42px; height:24px; flex:0 0 auto; }
.switch input{ opacity:0; width:0; height:0; }
.switch .track{ position:absolute; inset:0; border-radius:999px; background:var(--line-3); transition:.18s; cursor:pointer; }
.switch .track::before{ content:""; position:absolute; height:18px; width:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.18s; box-shadow:var(--sh-1); }
.switch input:checked + .track{ background:var(--accent); }
.switch input:checked + .track::before{ transform:translateX(18px); }

/* ---------- paper sheet ---------- */
.paper{ position:relative; background:#fff; border:1px solid var(--line-2); box-shadow:var(--sh-paper); border-radius:4px; }
.paper__stamp{ position:absolute; top:14px; right:18px; font-family:var(--mono); font-size:12px; color:var(--ink-soft); }
.paper__stamp b{ color:var(--ink); font-weight:600; }

.stamp-page{
  position:relative; width:100%; max-width:300px; margin:0 auto;
  aspect-ratio:210/297; background:#fff;
  border:1px solid var(--line-2); box-shadow:var(--sh-paper);
  cursor:crosshair; user-select:none; overflow:hidden; touch-action:none;
}
.stamp-page .stamp-mg{
  position:absolute; border:1px dashed var(--line);
  pointer-events:none;
}
.stamp-page .stamp-line{
  position:absolute; height:6px;
  background:var(--surface-wash); pointer-events:none;
}
.stamp-page.dragging .stamp-num{ cursor:grabbing; }
.stamp-page .stamp-num{
  position:absolute; width:max-content; white-space:nowrap;
  line-height:1; cursor:grab; color:#1a1a1d; pointer-events:auto;
}
.stamp-pills{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 12px; }
.stamp-pills button{
  font-family:var(--sans); font-size:12.5px; font-weight:600;
  padding:6px 10px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line-2); background:#fff; color:var(--ink-soft);
}
.stamp-pills button.on{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* ---------- scrollbars ---------- */
*::-webkit-scrollbar{ width:11px; height:11px; }
*::-webkit-scrollbar-thumb{ background:#d2d6df; border-radius:9px; border:3px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:#bcc2cf; background-clip:padding-box; border:3px solid transparent; }
.ixscroll::-webkit-scrollbar,
.ixscroll::-webkit-scrollbar-thumb,
.ixscroll::-webkit-scrollbar-track{ width:0 !important; height:0 !important; display:none !important; background:transparent !important; }

/* ---------- note (explain mode) ---------- */
.note{ font-size:12.5px; line-height:1.5; background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--ink-700); border-radius:10px; padding:10px 13px; }
.note b{ color:var(--accent-deep); }

/* focus */
:focus-visible{ outline:2.5px solid var(--accent); outline-offset:2px; border-radius:4px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }