/* HEELWICK design tokens + shared chrome. Style "Struk kasir": ink-blue ground, white thermal receipts.
   Change colors only here. Pages: include this file, <header data-chrome></header>, <footer data-chrome-footer></footer>,
   and call initChrome() from /shared/site.js (see the comment at the top of that file).
   Token names kept from the placeholder for other pages: --bg --surface --ink --muted --line --ok --refused --pending --accent
   --font-display --font-mono --font-body. */

@font-face{
  font-family:'Departure Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/fonts/DepartureMono-Regular.woff2') format('woff2');
}

:root{
  color-scheme: dark;
  /* ground (default = ink blue) */
  --bg:#0F1B2D; --bg-2:#14243A; --bg-3:#1B2E48; --line:#263C5A; --line-2:#3A5579;
  --ink:#EAF0F7; --muted:#A3B3C8; --faint:#8396AE;
  /* receipt paper (stays white in both themes) */
  --paper:#FFFFFF; --paper-ink:#141A23; --paper-muted:#566173; --paper-line:#D5DBE3;
  --paper-shadow:0 18px 40px -18px rgba(0,0,0,.7);
  /* states (fills); *-text variants are for text on --bg */
  --paid:#3DDC84; --refused:#FF4D3D; --sent:#C3CBD6; --warn:#FFC94D;
  --paid-text:#3DDC84; --refused-text:#FF7466; --warn-text:#FFD36E;
  --stamp-ink:#0B1018;
  --accent:#3DDC84; --accent-ink:#06210F;
  --focus:#8DBBFF;
  /* aliases for other pages */
  --surface:var(--bg-2); --ok:var(--paid-text); --pending:var(--sent);
  /* type */
  --font-mono:'Departure Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-body:'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display:var(--font-body);
  /* layout */
  --gutter:16px; --maxw:1200px; --bar-h:48px; --radius:10px;
}
@media (min-width:768px){ :root{ --gutter:32px; --bar-h:56px; } }

/* light: pale blue-grey paper ground, receipts stay white */
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){
  color-scheme: light;
  --bg:#E4EAF1; --bg-2:#EEF2F7; --bg-3:#F8FAFC; --line:#C3CEDB; --line-2:#9FAFC3;
  --ink:#0F1B2D; --muted:#42536A; --faint:#55667D;
  --paper-shadow:0 14px 30px -16px rgba(15,27,45,.45), 0 0 0 1px rgba(15,27,45,.07);
  --paid-text:#0B7A3B; --refused-text:#BE2A1B; --warn-text:#7A5300;
  --accent:#0F1B2D; --accent-ink:#FFFFFF; --focus:#1F5FD1;
}}
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#E4EAF1; --bg-2:#EEF2F7; --bg-3:#F8FAFC; --line:#C3CEDB; --line-2:#9FAFC3;
  --ink:#0F1B2D; --muted:#42536A; --faint:#55667D;
  --paper-shadow:0 14px 30px -16px rgba(15,27,45,.45), 0 0 0 1px rgba(15,27,45,.07);
  --paid-text:#0B7A3B; --refused-text:#BE2A1B; --warn-text:#7A5300;
  --accent:#0F1B2D; --accent-ink:#FFFFFF; --focus:#1F5FD1;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100vh; display:flex; flex-direction:column}
body > main{flex:1 0 auto}
img,svg{display:block; max-width:100%}
a{color:inherit; text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
button,input,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px}
:focus:not(:focus-visible){outline:none}
::selection{background:color-mix(in srgb, var(--paid) 35%, transparent); color:inherit}
.skip{position:fixed; left:12px; top:-60px; z-index:100; padding:10px 14px; border-radius:8px; background:var(--accent); color:var(--accent-ink);
  font-weight:600; text-decoration:none; transition:top .15s}
.skip:focus{top:12px}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:0}
.muted{color:var(--muted)}
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)}
[hidden]{display:none!important}

/* buttons + pills */
.hw-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 16px; border-radius:8px;
  border:1px solid var(--line-2); background:transparent; color:var(--ink); font-weight:600; font-size:15px; text-decoration:none;
  cursor:pointer; white-space:nowrap; transition:background .15s, border-color .15s, transform .1s, filter .15s}
.hw-btn:hover{background:var(--bg-3); text-decoration:none}
.hw-btn:active{transform:translateY(1px)}
.hw-btn--primary{background:var(--accent); color:var(--accent-ink); border-color:transparent}
.hw-btn--primary:hover{background:var(--accent); filter:brightness(1.08)}
.hw-btn[disabled],.hw-btn[aria-disabled="true"]{opacity:.5; cursor:not-allowed; filter:none; transform:none}
.hw-btn--sm{height:32px; padding:0 12px; font-size:14px; border-radius:7px}
.hw-pill{display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 4px 0 12px; border-radius:999px;
  border:1px solid var(--line); background:var(--bg-2); font-size:13px; white-space:nowrap; min-width:0}
.hw-pill--plain{padding:0 12px}
.hw-iconbtn{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:999px; border:0; background:transparent;
  color:var(--muted); cursor:pointer; padding:0; flex:none}
.hw-iconbtn:hover{color:var(--ink); background:var(--bg-3)}
.hw-iconbtn[disabled]{opacity:.45; cursor:not-allowed; background:transparent}
.hw-iconbtn svg{width:14px; height:14px}

/* top bar */
.hw-bar{position:sticky; top:0; z-index:40; height:var(--bar-h); background:var(--bg);
  border-bottom:1px solid var(--line)}
@supports (backdrop-filter: blur(4px)){
  .hw-bar{background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:saturate(1.2) blur(10px)}
}
.hw-bar__in{height:100%; display:flex; align-items:center; gap:10px}
.hw-mark{display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-family:var(--font-mono); font-size:22px;
  line-height:1; flex:none}
.hw-mark:hover{text-decoration:none}
.hw-mark svg{width:16px; height:20px; transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.hw-mark:hover svg{transform:rotate(-8deg) translateY(-1px)}
.hw-ca{gap:6px}
.hw-ca__label{color:var(--muted); font-size:12px}
.hw-ca__addr{font-family:var(--font-mono); font-size:13px}
.hw-nav{display:flex; align-items:center; gap:2px; margin-left:auto}
.hw-nav a{padding:6px 10px; border-radius:7px; text-decoration:none; color:var(--muted); font-size:15px; font-weight:500}
.hw-nav a:hover{color:var(--ink); background:var(--bg-2)}
.hw-nav a[aria-current="page"]{color:var(--ink)}
.hw-launch{color:var(--muted)}
.hw-launch b{color:var(--ink); font-weight:600}
.hw-menu-btn{display:none; margin-left:auto; width:40px; height:40px; border:1px solid var(--line); border-radius:8px; background:var(--bg-2);
  cursor:pointer; place-items:center; padding:0; color:var(--ink); flex:none}
.hw-menu-btn svg{width:18px; height:18px}
.hw-sheet{position:fixed; inset:var(--bar-h) 0 auto 0; z-index:39; background:var(--bg); border-bottom:1px solid var(--line);
  padding:12px var(--gutter) 20px; display:flex; flex-direction:column; box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
.hw-sheet a{padding:12px 2px; text-decoration:none; font-size:17px; border-bottom:1px solid var(--line)}
.hw-sheet a:last-child{border-bottom:0}
.hw-sheet .hw-launch{margin:4px 0 8px; align-self:flex-start}
@media (max-width:899px){
  .hw-nav,.hw-bar .hw-launch{display:none}
  .hw-menu-btn{display:grid}
  .hw-ca__label{display:none}
  .hw-ca.is-zero .hw-ca__label{display:inline}
  .hw-ca.is-zero .hw-ca__addr{display:none}
  .hw-buy .hw-buy__long{display:none}
  .hw-buy{padding:0 10px}
}
@media (min-width:900px){ .hw-sheet{display:none!important} .hw-buy .hw-buy__short{display:none} }
@media (max-width:339px){ .hw-mark span{display:none} }

/* footer */
.hw-foot{border-top:1px solid var(--line); margin-top:64px; padding:28px 0 40px; color:var(--muted); font-size:14px}
.hw-foot__in{display:flex; flex-wrap:wrap; gap:12px 28px; align-items:baseline}
.hw-foot__in > .hw-mark{font-size:16px}
.hw-foot nav{display:flex; flex-wrap:wrap; gap:8px 20px}
.hw-foot a{color:var(--ink)}
.hw-foot__note{flex-basis:100%; color:var(--faint); font-size:13px}

/* toast */
.hw-toasts{position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:60; display:flex; flex-direction:column; gap:8px;
  width:min(440px, calc(100vw - 32px)); pointer-events:none}
.hw-toast{pointer-events:auto; padding:12px 14px; border-radius:10px; background:var(--bg-3); color:var(--ink); border:1px solid var(--line-2);
  font-size:14px; box-shadow:0 12px 30px -12px rgba(0,0,0,.5); animation:hw-toast-in .2s ease-out}
.hw-toast--warn{background:var(--warn); color:#2A1D00; border-color:transparent}
.hw-toast--ok{border-color:var(--paid)}
.hw-toast--err{border-color:var(--refused)}
@keyframes hw-toast-in{from{opacity:0; transform:translateY(8px)}}

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