/* ============================================================
   Tap — shared design system
   Used by the POS (root) and the Tap wallet (/mobilepay)
   ============================================================ */

:root {
  /* Brand */
  --ink:        #0E1A17;
  --ink-2:      #16261F;
  --amana:      #0B5D4E;
  --amana-600:  #0A5446;
  --amana-700:  #073B31;
  --amana-800:  #06302A;
  --amana-300:  #3E9E89;
  --amana-200:  #8FC7BA;
  --gold:       #C6A15B;
  --gold-100:   #E8D9B0;
  --gold-200:   #E2C98E;
  --gold-600:   #A9863F;

  /* Surfaces (POS, light) */
  --paper:      #F4F1E8;
  --paper-2:    #FBF9F3;
  --card:       #FFFFFF;
  --mist:       #E9EEEA;
  --line:       #DCE4DE;
  --line-soft:  #E8EDE8;

  /* Text */
  --text:       #16241E;
  --text-dim:   #5E6E66;
  --text-faint: #93A199;
  --on-dark:    #EAF3EE;
  --on-dark-dim:#9DBBAF;

  /* State */
  --danger:     #C0492F;
  --danger-bg:  #FBEAE5;
  --success:    #1B9D69;
  --success-bg: #E6F4EC;
  --warn:       #C98A2E;

  /* Geometry */
  --r-xs: 8px; --r-sm: 11px; --r: 14px; --r-md: 18px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;

  /* Elevation */
  --sh-1: 0 1px 2px rgba(14,26,23,.06), 0 2px 6px rgba(14,26,23,.05);
  --sh-2: 0 4px 14px rgba(14,26,23,.10), 0 1px 3px rgba(14,26,23,.06);
  --sh-3: 0 18px 50px rgba(8,40,33,.22), 0 6px 18px rgba(8,40,33,.14);
  --sh-card: 0 24px 60px rgba(6,40,33,.30), 0 2px 0 rgba(255,255,255,.06) inset;

  /* Type */
  --display: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
  --ui: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --tap: 56px; /* min touch target for the HP Engage screen */
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--ui);
  color: var(--text);
  font-weight: 450;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
ul { list-style: none; padding: 0; }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Tabular figures for money + counters */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---- Brand mark ------------------------------------------- */
.star {
  display: inline-block;
  -webkit-mask: url("../assets/star.svg") center / contain no-repeat;
          mask: url("../assets/star.svg") center / contain no-repeat;
  background: currentColor;
}
.star--svg { /* when used as an actual <svg>/<img> */ -webkit-mask: none; mask: none; background: none; }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--display);
  letter-spacing: -.01em;
  line-height: 1;
}
.wordmark .glyph {
  width: 1.55em; height: 1.55em;
  display: grid; place-items: center;
  border-radius: 9px;
  background: linear-gradient(145deg, var(--amana-300), var(--amana-700));
  box-shadow: 0 2px 8px rgba(8,40,33,.28), inset 0 1px 0 rgba(255,255,255,.18);
  flex: none;
}
.wordmark .glyph .star { width: 64%; height: 64%; color: var(--gold-100); }
.wordmark .name { font-weight: 800; }
.wordmark .name b { font-weight: 800; }
.wordmark .name span { color: var(--gold-600); }

/* Embossed girih texture — recolour via `color`, set on a positioned layer */
.girih {
  -webkit-mask: url("../assets/girih-tile.svg") 0 0 / 118px 118px repeat;
          mask: url("../assets/girih-tile.svg") 0 0 / 118px 118px repeat;
  background: currentColor;
}

/* ---- Buttons ---------------------------------------------- */
.btn {
  --bg: var(--amana);
  --fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: var(--tap);
  padding: 0 1.25rem;
  border-radius: var(--r);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ui);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .01em;
  transition: transform .08s ease, filter .15s ease, background .15s ease, box-shadow .15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px) scale(.995); }
.btn[disabled] { opacity: .42; pointer-events: none; }
.btn--gold { --bg: linear-gradient(180deg, var(--gold-200), var(--gold)); --fg: var(--ink); box-shadow: var(--sh-2); }
.btn--ghost { --bg: transparent; --fg: var(--amana-700); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--dark  { --bg: var(--ink-2); --fg: var(--on-dark); }
.btn--quiet { --bg: var(--mist); --fg: var(--amana-700); }
.btn--block { width: 100%; }
.btn--lg { min-height: 66px; font-size: 1.12rem; border-radius: var(--r-md); }

/* ---- Misc helpers ----------------------------------------- */
.eyebrow {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

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