/* IJAN Kassa — design tokens */
:root {
  /* Brand */
  --accent: oklch(0.78 0.14 78);
  --accent-ink: oklch(0.22 0.04 78);
  --accent-soft: oklch(0.94 0.05 78);

  /* Payment colors */
  --pay-cash: oklch(0.68 0.12 155);
  --pay-cash-soft: oklch(0.95 0.04 155);
  --pay-card: oklch(0.66 0.10 235);
  --pay-card-soft: oklch(0.95 0.03 235);
  --pay-meal: oklch(0.62 0.10 310);
  --pay-meal-soft: oklch(0.95 0.03 310);
  --pay-voucher: oklch(0.68 0.12 50);
  --pay-voucher-soft: oklch(0.95 0.04 50);

  /* Tag colors (product stripes) — match desktop kassa */
  --tag-rund: oklch(0.65 0.15 25);
  --tag-kip: oklch(0.78 0.14 78);
  --tag-vis: oklch(0.66 0.10 235);
  --tag-veggie: oklch(0.68 0.12 155);
  --tag-frites: oklch(0.80 0.13 90);
  --tag-drink: oklch(0.66 0.10 235);
  --tag-bier: oklch(0.62 0.10 65);
  --tag-koffie: oklch(0.45 0.06 50);
  --tag-snack: oklch(0.7 0.13 35);
  --tag-dessert: oklch(0.62 0.10 310);
  --tag-default: oklch(0.7 0.02 80);

  /* Pastel-tinted card backgrounds (matches desktop subtle wash) */
  --tag-rund-bg: oklch(0.97 0.02 25);
  --tag-kip-bg: oklch(0.97 0.02 78);
  --tag-vis-bg: oklch(0.97 0.015 235);
  --tag-veggie-bg: oklch(0.97 0.015 155);
  --tag-frites-bg: oklch(0.97 0.02 90);
  --tag-drink-bg: oklch(0.97 0.015 235);
  --tag-bier-bg: oklch(0.97 0.015 65);
  --tag-koffie-bg: oklch(0.96 0.01 50);
  --tag-snack-bg: oklch(0.97 0.02 35);
  --tag-dessert-bg: oklch(0.97 0.015 310);
  --tag-default-bg: oklch(0.97 0 0);

  /* Light theme (default) */
  --bg: oklch(0.985 0.003 80);
  --bg-elev: oklch(0.97 0.004 80);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.98 0.004 80);
  --ink: oklch(0.18 0.01 80);
  --ink-2: oklch(0.42 0.01 80);
  --ink-3: oklch(0.62 0.01 80);
  --line: oklch(0.91 0.005 80);
  --line-2: oklch(0.86 0.006 80);
  --shadow-sm: 0 1px 2px oklch(0.18 0.01 80 / 0.06);
  --shadow-md: 0 4px 14px oklch(0.18 0.01 80 / 0.08);
  --shadow-lg: 0 12px 40px oklch(0.18 0.01 80 / 0.18);
  --backdrop: oklch(0.18 0.01 80 / 0.45);

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: 140ms;
  --dur-slow: 240ms;

  /* Type */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
}

[data-theme="dark"] {
  --bg: oklch(0.18 0.008 80);
  --bg-elev: oklch(0.22 0.008 80);
  --surface: oklch(0.245 0.008 80);
  --surface-2: oklch(0.28 0.008 80);
  --ink: oklch(0.96 0.005 80);
  --ink-2: oklch(0.78 0.008 80);
  --ink-3: oklch(0.58 0.008 80);
  --line: oklch(0.32 0.008 80);
  --line-2: oklch(0.4 0.008 80);
  --accent-soft: oklch(0.32 0.05 78);
  --accent-ink: oklch(0.92 0.05 78);
  --pay-cash-soft: oklch(0.3 0.04 155);
  --pay-card-soft: oklch(0.3 0.04 235);
  --pay-meal-soft: oklch(0.3 0.04 310);
  --pay-voucher-soft: oklch(0.3 0.04 50);
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4);
  --shadow-md: 0 4px 14px oklch(0 0 0 / 0.5);
  --shadow-lg: 0 12px 40px oklch(0 0 0 / 0.7);
  --backdrop: oklch(0 0 0 / 0.6);

  /* Pastel bgs become subtle tints in dark mode */
  --tag-rund-bg: oklch(0.27 0.04 25);
  --tag-kip-bg: oklch(0.27 0.04 78);
  --tag-vis-bg: oklch(0.27 0.03 235);
  --tag-veggie-bg: oklch(0.27 0.03 155);
  --tag-frites-bg: oklch(0.27 0.04 90);
  --tag-drink-bg: oklch(0.27 0.03 235);
  --tag-bier-bg: oklch(0.27 0.03 65);
  --tag-koffie-bg: oklch(0.26 0.02 50);
  --tag-snack-bg: oklch(0.27 0.04 35);
  --tag-dessert-bg: oklch(0.27 0.03 310);
  --tag-default-bg: oklch(0.25 0 0);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: oklch(0.92 0.01 80);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
  letter-spacing: -0.005em;
}

[data-theme="dark"] body { background: oklch(0.1 0.005 80); }

button { font-family: inherit; cursor: pointer; }
.mono { font-family: var(--font-mono); font-feature-settings: 'tnum', 'zero'; }

/* App-scoped resets within the device viewport */
.kassa {
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.kassa button { font-family: inherit; color: inherit; }

/* tap feedback */
.tap { transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), opacity var(--dur) var(--ease); -webkit-tap-highlight-color: transparent; user-select: none; }
.tap:active { transform: scale(0.97); }

/* hide scrollbars on horizontal rails */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* sheet animations */
@keyframes sheetIn { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes drawCheck {
  0% { stroke-dashoffset: 60; }
  100% { stroke-dashoffset: 0; }
}
@keyframes pulseRing {
  0% { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}