/* Tukluy POS — Launch / brand asset tokens
   Builds on the app's D2 "Account Green" system, warmed up for marketing surfaces. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=Kantumruy+Pro:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&family=Noto+Sans+TC:wght@400;500;700&family=Noto+Sans+Thai:wght@400;500;700&family=Noto+Sans+Lao:wght@400;500;700&family=Noto+Sans+Myanmar:wght@400;500;700&display=swap');

:root {
  /* Brand core (from D2 Account Green) */
  --g:        #1A6E3F;   /* primary */
  --g-hover:  #155932;
  --g-deep:   #00382A;   /* deepest, near-black green */
  --g-2:      #2C8C54;   /* lighter green for gradients/depth */
  --g-bg:     #E8F2EC;
  --g-bg-2:   #C6DDCD;

  /* Warm marketing surfaces */
  --paper:    #F4EFE3;   /* warm cream canvas */
  --paper-2:  #EAE2D0;
  --ink:      #15201A;   /* warm near-black text */
  --ink-2:    #46514A;

  /* Accents */
  --gold:     #E0A11A;   /* amber/coin accent */
  --gold-2:   #C8861A;
  --coral:    #D7553B;   /* secondary warm accent (debts/alerts) */
  --sky:      #2E6FB0;   /* info accent */

  --white:    #FFFFFF;

  /* Type */
  --ff-display: 'Space Grotesk', 'Kantumruy Pro', system-ui, sans-serif; /* @kind font */
  --ff-body:    'Inter', 'Noto Sans', 'Kantumruy Pro', system-ui, sans-serif; /* @kind font */
  --ff-km:      'Kantumruy Pro', 'Noto Sans Khmer', system-ui, sans-serif; /* @kind font */
  --ff-mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace; /* @kind font */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* hide scrollbars so tiled screenshot exports don't capture a scrollbar strip on the right/bottom */
html { scrollbar-width: none; -ms-overflow-style: none; }
::-webkit-scrollbar { width: 0 !important; height: 0 !important; background: transparent; }

/* tabular numerals helper */
.tnum { font-feature-settings: "tnum","zero"; font-variant-numeric: tabular-nums slashed-zero; }

/* ===== The Tukluy tally mark (icon glyph) — pure geometry, scalable ===== */
/* size is driven by --m (mark height in px). Used inside icon tiles & lockups. */
.tally {
  position: relative;
  width: calc(var(--m) * 1.18);
  height: var(--m);
  flex: 0 0 auto;
}
.tally i {                      /* the four counting strokes */
  position: absolute;
  top: 0;
  width: calc(var(--m) * 0.135);
  height: 100%;
  border-radius: calc(var(--m) * 0.09);
  background: var(--tally-stroke, #F4EFE3);
}
.tally i:nth-child(1) { left: 0; }
.tally i:nth-child(2) { left: calc(var(--m) * 0.29); }
.tally i:nth-child(3) { left: calc(var(--m) * 0.58); }
.tally i:nth-child(4) { left: calc(var(--m) * 0.87); }
.tally i.slash {                /* the fifth, diagonal tally stroke */
  left: calc(var(--m) * -0.02);
  width: calc(var(--m) * 1.22);
  height: calc(var(--m) * 0.15);
  top: 50%;
  border-radius: calc(var(--m) * 0.075);
  background: var(--tally-slash, #E0A11A);
  transform: translateY(-50%) rotate(-21deg);
  transform-origin: center;
}