/* ==========================================================================
   ABC POS — "Counter" design system
   Palette derived from a Gulf checkout counter: espresso wood, brass fittings,
   jade for money, warm receipt paper. Display type used with restraint.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  /* surfaces — warm blacks, never blue-black */
  --espresso:#141B2D;
  --bark:#1C2540;
  --slate:#2B3558;
  --slate-2:#3A4569;

  /* paper */
  --paper:#F6F4EF;
  --paper-2:#EFEDE6;
  --paper-3:#E4E1D6;
  --edge:#E6E1D5;

  /* accent — brass is the signature */
  --brass:#F2A93B;
  --brass-hi:#F7C976;
  --brass-lo:#A8730E;
  --brass-wash:rgba(242,169,59,.15);

  /* money */
  --jade:#0E7C6B;
  --jade-hi:#129883;
  --jade-wash:rgba(14,124,107,.11);

  /* signal */
  --rust:#D4483B;
  --rust-wash:rgba(212,72,59,.12);

  /* text */
  --ink:#141B2D;
  --ink-2:#4A5268;
  --muted:#8A93AC;
  --cream:#FFFFFF;
  --cream-2:#9AA3B8;
  --dim:#5B6478;

  /* type */
  --display:'Sora',system-ui,sans-serif;
  --sans:'Sora',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono','SF Mono',monospace;

  /* geometry */
  --r-sm:8px; --r:13px; --r-lg:20px; --r-xl:28px;
  --shadow-sm:0 1px 2px rgba(20,27,45,.06), 0 2px 6px rgba(20,27,45,.04);
  --shadow:0 2px 6px rgba(20,27,45,.06), 0 12px 28px rgba(20,27,45,.08);
  --shadow-lg:0 30px 70px rgba(20,27,45,.28);

  --nav-w:236px;
}

/* ---------- reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--sans); background:var(--paper); color:var(--ink);
  line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2.5px solid var(--brass);outline-offset:2px;border-radius:4px}
::selection{background:var(--brass-wash);color:var(--ink)}

/* ---------- typography ---------- */
.display{
  font-family:var(--display); font-weight:600;
  letter-spacing:-.022em; line-height:1.03;
}
h1.display{font-size:clamp(38px,6.4vw,74px)}
h2.display{font-size:clamp(27px,3.6vw,40px); line-height:1.1}
h3.display{font-size:clamp(20px,2.2vw,25px); line-height:1.2}

.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--brass-lo);
}
.eyebrow--light{color:var(--brass-hi)}

.lede{font-size:clamp(15.5px,1.7vw,18.5px); color:var(--ink-2); line-height:1.66}
.small{font-size:13px;color:var(--muted)}
.tiny{font-size:11.5px;color:var(--muted)}

/* figures always tabular so columns line up */
.fig{font-family:var(--mono); font-feature-settings:'tnum' 1; font-variant-numeric:tabular-nums}

/* ---------- wordmark ---------- */
.wordmark{
  font-family:var(--display); font-weight:700; letter-spacing:-.03em;
  display:inline-flex; align-items:baseline; gap:.14em;
}
.wordmark .pos{color:var(--brass)}
.wordmark--light{color:var(--cream)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-size:14.5px; font-weight:600; letter-spacing:-.01em;
  padding:12px 22px; border-radius:var(--r); transition:transform .16s, background .16s, box-shadow .16s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn--brass{background:var(--brass); color:#141B2D; box-shadow:0 1px 0 var(--brass-hi) inset, var(--shadow-sm)}
.btn--brass:hover{background:var(--brass-hi)}
.btn--jade{background:var(--jade); color:#fff}
.btn--jade:hover{background:var(--jade-hi)}
.btn--ghost{border:1.5px solid var(--edge); color:var(--ink)}
.btn--ghost:hover{border-color:var(--brass); background:var(--brass-wash)}
.btn--onDark{border:1.5px solid rgba(255,255,255,.28); color:var(--cream)}
.btn--onDark:hover{border-color:var(--brass); color:var(--brass-hi)}
.btn--lg{padding:15px 30px; font-size:16px}
.btn--sm{padding:8px 15px; font-size:13px; border-radius:var(--r-sm)}
.btn:disabled{opacity:.4; cursor:not-allowed}

/* ---------- surfaces ---------- */
.card{background:#fff; border:1px solid var(--edge); border-radius:var(--r-lg); box-shadow:var(--shadow-sm)}
.card__pad{padding:20px 22px}
.card__head{
  display:flex; align-items:center; gap:12px; padding:17px 22px;
  border-bottom:1px solid var(--edge);
}
.card__head h3{font-size:15px; font-weight:600; letter-spacing:-.01em}
.card__head .spacer{flex:1}

/* ---------- chips / tags ---------- */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; padding:5px 10px; border-radius:20px;
}
.chip--brass{background:var(--brass-wash); color:var(--brass-lo); border:1px solid rgba(242,169,59,.4)}
.chip--jade{background:var(--jade-wash); color:var(--jade); border:1px solid rgba(14,124,107,.3)}
.chip--rust{background:var(--rust-wash); color:var(--rust); border:1px solid rgba(176,74,46,.28)}
.chip--muted{background:var(--paper-2); color:var(--muted); border:1px solid var(--edge)}
.chip i{font-size:9px}

/* ---------- forms ---------- */
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:12px; font-weight:600; color:var(--ink-2); letter-spacing:-.005em}
.input{
  width:100%; background:#fff; border:1.5px solid var(--edge); border-radius:var(--r);
  padding:11px 13px; font-size:14.5px; transition:border-color .15s, box-shadow .15s;
}
.input:focus{outline:none; border-color:var(--brass); box-shadow:0 0 0 3.5px var(--brass-wash)}
.input--dark{background:var(--espresso); border-color:var(--slate-2); color:var(--cream)}
.input--dark:focus{border-color:var(--brass)}
select.input{appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7'><path d='M1 1l4.5 4.5L10 1' fill='none' stroke='%238B8071' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:34px}

/* ---------- tables ---------- */
.tbl{width:100%; border-collapse:collapse}
.tbl th{
  text-align:left; font-size:10.5px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted); padding:10px 12px;
  border-bottom:1px solid var(--edge); white-space:nowrap;
}
.tbl td{padding:13px 12px; border-bottom:1px solid var(--paper-3); font-size:14px; vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:background .13s}
.tbl tbody tr:hover{background:var(--paper-2)}
.tbl .num{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:13.5px}
.tbl tfoot td{border-top:2px solid var(--ink); font-weight:700; padding-top:13px; background:var(--paper-2)}

/* ==========================================================================
   APP SHELL — dark rail + paper canvas
   ========================================================================== */
.shell{display:flex; min-height:100vh}
.rail{
  width:var(--nav-w); flex-shrink:0; background:var(--espresso); color:var(--cream);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
  border-right:1px solid #0B1020;
}
.rail__brand{padding:22px 20px 18px; font-size:20px}
.rail__group{padding:16px 12px 4px}
.rail__group span{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:#5B6478; padding-left:10px;
}
.rail a.nav{
  display:flex; align-items:center; gap:12px; padding:10.5px 13px; margin:1px 8px;
  border-radius:10px; font-size:14.5px; font-weight:500; color:var(--cream-2);
  transition:background .15s, color .15s; position:relative;
}
.rail a.nav i{width:17px; font-size:14px; text-align:center; color:#7A85A0; transition:color .15s}
.rail a.nav:hover{background:rgba(255,255,255,.06); color:var(--cream)}
.rail a.nav:hover i{color:var(--brass)}
.rail a.nav.is-active{background:rgba(242,169,59,.15); color:#fff}
.rail a.nav.is-active i{color:var(--brass)}
.rail a.nav.is-active::before{
  content:''; position:absolute; left:-8px; top:9px; bottom:9px; width:3px;
  background:var(--brass); border-radius:0 3px 3px 0;
}
.rail__foot{margin-top:auto; padding:16px 20px; border-top:1px solid var(--slate); font-size:12px; color:#5B6478}

.canvas{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{
  display:flex; align-items:center; gap:14px; padding:15px 26px;
  background:rgba(246,244,239,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--edge); position:sticky; top:0; z-index:20; flex-wrap:wrap;
}
.topbar h1{font-size:17px; font-weight:600; letter-spacing:-.015em}
.topbar .spacer{flex:1}
.page{padding:24px 26px 60px; max-width:1240px; width:100%}

/* mobile rail */
.rail__toggle{display:none}
@media(max-width:900px){
  .rail{position:fixed; z-index:60; transform:translateX(-100%); transition:transform .24s ease}
  .rail.is-open{transform:none}
  .rail__toggle{display:inline-flex; font-size:19px; color:var(--ink)}
  .page{padding:18px 15px 50px}
  .topbar{padding:12px 15px}
}

/* ==========================================================================
   RECEIPT — the signature object, used across every surface
   ========================================================================== */
.receipt{
  background:linear-gradient(#FFFFFF,#FCFBF7); color:#141B2D; width:290px;
  font-family:var(--mono); font-size:11.5px; line-height:1.72; padding:22px 19px 30px;
  box-shadow:var(--shadow-lg); position:relative;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),
    96% 100%,92% calc(100% - 8px),88% 100%,84% calc(100% - 8px),80% 100%,
    76% calc(100% - 8px),72% 100%,68% calc(100% - 8px),64% 100%,60% calc(100% - 8px),
    56% 100%,52% calc(100% - 8px),48% 100%,44% calc(100% - 8px),40% 100%,
    36% calc(100% - 8px),32% 100%,28% calc(100% - 8px),24% 100%,20% calc(100% - 8px),
    16% 100%,12% calc(100% - 8px),8% 100%,4% calc(100% - 8px),0 100%);
}
.receipt__c{text-align:center}
.receipt__biz{font-family:var(--sans); font-weight:700; font-size:15px; letter-spacing:.02em}
.receipt__rule{border-top:1px dashed #C8C3B4; margin:11px 0}
.receipt__row{display:flex; justify-content:space-between; gap:10px}
.receipt__row span:last-child{font-variant-numeric:tabular-nums}
.receipt__total{font-weight:500; font-size:15px}
.receipt__qr{
  width:60px; height:60px; margin:12px auto 0; border:4px solid #141B2D;
  background:repeating-conic-gradient(#141B2D 0% 25%, #FFFFFF 0% 50%); background-size:9px 9px;
}
.receipt__muted{color:#8A93AC}

/* ==========================================================================
   MISC
   ========================================================================== */
.grain{position:relative}
.grain::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.36'/></svg>");
}
.stack{display:flex; flex-direction:column}
.row{display:flex; align-items:center}
.grid{display:grid}
.hide{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}