/* ============================================================================
   Jacks Palace — Design System (theme.css)
   Single source of design tokens for the cashier AND the back-office pages.
   Implements design/DESIGN.md. Offline-safe: no external font fetch — the till
   runs offline, so we lean on a high-quality system stack (Segoe UI Variable on
   Win11 / -apple-system on Mac) with Inter as a first choice if installed.
   ========================================================================== */

:root {
  /* ---- Ink (warm near-black, not pure #000) ---- */
  --text:          #14110E;   /* primary text / headings           */
  --text-muted:    #5C554A;   /* secondary text                    */
  --text-faint:    #8A8170;   /* tertiary / hints / placeholders   */

  /* ---- Surfaces ---- */
  --bg:            #FAF9F7;   /* app canvas (warm off-white)        */
  --surface:       #FFFFFF;   /* cards / panels / modals            */
  --surface-2:     #F4F2EE;   /* input wells / sunken / stripes     */
  --surface-3:     #E9E5DD;   /* pressed states                     */
  --border:        #ECE9E3;   /* hairlines / dividers               */
  --border-strong: #D9D4CB;   /* input borders                      */

  /* ---- Accent: restrained premium brass (the "Palace" cue) ---- */
  --accent:        #B68A2E;   /* primary CTA / active / focus       */
  --accent-strong: #95701F;   /* hover / press                      */
  --accent-ink:    #FFFFFF;   /* text on accent                     */
  --accent-soft:   #FBF4E2;   /* selected wash / soft bg            */

  /* ---- Semantics ---- */
  --success:       #0E9F6E;   /* cash / complete sale (money green) */
  --success-strong:#0B7E58;
  --success-ink:   #FFFFFF;
  --info:          #2563EB;
  --danger:        #DC2626;
  --danger-soft:   #FDECEC;

  /* ---- Shadows: soft, layered (Stripe signature is subtle depth) ---- */
  --shadow-sm:     0 1px 3px rgba(20,17,14,.08), 0 1px 2px rgba(20,17,14,.04);
  --shadow-md:     0 4px 12px rgba(20,17,14,.08), 0 2px 4px rgba(20,17,14,.04);
  --shadow-lg:     0 12px 32px rgba(20,17,14,.14), 0 4px 8px rgba(20,17,14,.06);
  --ring:          0 0 0 3px rgba(182,138,46,.28);

  /* ---- Radius ---- */
  --radius:        10px;
  --radius-lg:     14px;
  --radius-xl:     20px;

  /* ---- Type ---- */
  --font-sans: 'Inter', 'Segoe UI Variable Text', 'Segoe UI', -apple-system,
               BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  --font-mono: 'Roboto Mono', 'Cascadia Mono', ui-monospace, 'Consolas',
               'SF Mono', Menlo, monospace;
}

/* ---- Base reset shared by every page ---- */
* { box-sizing: border-box; }
body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--text);
}
.num, .mono, [data-mono] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ============================================================================
   Shared primitives (used by the back-office pages; the cashier keeps its own
   component classes but reads the SAME tokens above so the look stays in sync).
   Namespaced jp- so they never collide with page-specific classes.
   ========================================================================== */
.jp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px;
  font: 600 14px/1 var(--font-sans);
  border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; transition: background .12s, box-shadow .12s, border-color .12s, filter .12s;
  white-space: nowrap;
}
.jp-btn--primary   { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm); }
.jp-btn--primary:hover   { background: var(--accent-strong); }
.jp-btn--success   { background: var(--success); color: var(--success-ink); box-shadow: var(--shadow-sm); }
.jp-btn--success:hover   { background: var(--success-strong); }
.jp-btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.jp-btn--secondary:hover { background: var(--surface-2); }
.jp-btn--ghost     { background: transparent; color: var(--text-muted); }
.jp-btn--ghost:hover     { background: var(--surface-2); color: var(--text); }
.jp-btn--danger    { background: var(--danger); color: #fff; }
.jp-btn:disabled   { opacity: .45; cursor: not-allowed; }

.jp-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 24px;
}
.jp-input {
  width: 100%; height: 44px; padding: 0 14px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  font: 15px var(--font-sans); outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.jp-input:focus { border-color: var(--accent); box-shadow: var(--ring); }
.jp-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: 999px;
  font: 600 12px/1.6 var(--font-sans);
  background: var(--surface-2); color: var(--text-muted);
}
.jp-pill--ok    { background: #E7F6EF; color: var(--success-strong); }
.jp-pill--warn  { background: #FFF4E2; color: #B45309; }
.jp-pill--bad   { background: var(--danger-soft); color: var(--danger); }