/* ============================================================
   Dastarkhwan POS — design tokens (the "Industry" system)
   Ported from the prototype's sale-page.css + README token tables.
   Square corners everywhere; no shadows except modals; steel accent
   carries every active/selected state; amber is reserved for money
   and time at risk.
   ============================================================ */
:root {
  --ground:        #f2f2f3;
  --panel:         #e9e9ea;
  --text:          #1d1f20;
  --deep:          #1d2d3d;
  --accent:        #5980a6;
  --accent-deep:   #416180;
  --accent-light:  #94bce3;
  --accent-tint:   #d6ebff;
  --accent-tint-2: #eef6ff;
  --accent-ink:    #2c455d;
  --amber:         #b8791f;
  --amber-ink:     #8a5a12;
  --amber-tint:    rgba(184, 120, 31, .15);
  --amber-wash:    rgba(184, 120, 31, .06);
  --amber-field:   #5a3f14;
  --amber-dot:     #e0b25a;
  --danger-dot:    #a3413f;
  --scrim:         rgba(43, 43, 45, .55);

  --line:        rgba(29, 31, 32, .16);
  --line-soft:   rgba(29, 31, 32, .10);
  --line-faint:  rgba(29, 31, 32, .08);
  --muted:       rgba(29, 31, 32, .55);
  --muted-2:     rgba(29, 31, 32, .65);
  --muted-3:     rgba(29, 31, 32, .45);

  --deep-line:      rgba(242, 242, 243, .16);
  --deep-line-soft: rgba(242, 242, 243, .14);
  --deep-line-2:    rgba(242, 242, 243, .28);
  --deep-text-2:    #94bce3;
  --deep-text-3:    #749dc4;

  --font-body: Barlow, system-ui, sans-serif;
  --font-head: 'Barlow Condensed', sans-serif;

  --aside-w: 392px;
  --nav-w: 92px;
  --header-h: 56px;
  --syncbar-h: 38px;
}

* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; margin: 0; }
body { background: var(--ground); color: var(--text); font-family: var(--font-body); }
button, input { font-family: inherit; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, #1d1f20 22%, transparent); }
::-webkit-scrollbar-track { background: transparent; }

@keyframes pulseDot { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

a { color: var(--accent-deep); }
a:hover { color: var(--deep); }

/* ---------- Shared primitives ---------- */
.btn {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:hover { background: var(--accent-tint-2); }
.btn-secondary:active { background: var(--accent-tint); }
.btn-primary { border-color: var(--accent); background: var(--accent); color: var(--ground); }
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-block { width: 100%; }
.btn[disabled] { cursor: not-allowed; opacity: .5; }

.input {
  font-family: var(--font-body);
  font-size: 14px;
  padding: 0 10px;
  border: 1px solid var(--line);
  background: var(--ground);
  color: var(--text);
  height: 38px;
}
.input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.field label {
  display: block;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 4px;
}
.field .input { width: 100%; height: 38px; }

.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
  text-align: left;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
.table td { padding: 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }

/* blueprint frame — transparent line-drawing card with corner registration marks */
.blueprint { position: relative; border: 1px solid var(--line); background: transparent; }
.blueprint .corner { position: absolute; width: 9px; height: 9px; pointer-events: none; }
.blueprint .corner::before, .blueprint .corner::after { content: ''; position: absolute; background: var(--muted); }
.blueprint .corner::before { width: 9px; height: 1px; }
.blueprint .corner::after { width: 1px; height: 9px; }
.blueprint .corner.tl { top: -1px; left: -1px; }
.blueprint .corner.tr { top: -1px; right: -1px; }
.blueprint .corner.tr::before { right: 0; }
.blueprint .corner.tr::after { right: 0; }
.blueprint .corner.bl { bottom: -1px; left: -1px; }
.blueprint .corner.bl::before { bottom: 0; }
.blueprint .corner.bl::after { bottom: 0; }
.blueprint .corner.br { bottom: -1px; right: -1px; }
.blueprint .corner.br::before { bottom: 0; right: 0; }
.blueprint .corner.br::after { bottom: 0; right: 0; }

[hidden] { display: none !important; }