/* OKAY POS Mobile Companion - Design Tokens & Variables */
:root {
  --primary: #0f172a;
  --primary-hover: #1e293b;
  --primary-light: rgba(15, 23, 42, 0.08);
  --primary-glow: rgba(15, 23, 42, 0.2);
  --dark: #0f172a;
  --dark-surface: #1e293b;
  --bg: #f1f5f9;
  --card-bg: #ffffff;
  --card-border: #e2e8f0;
  --text: #000000;
  --text-muted: #475569;
  --border: #cbd5e1;
  --border-light: #e2e8f0;
  --input-bg: #ffffff;
  --input-border: #94a3b8;
  --success: #16a34a;
  --danger: #dc2626;
  --warn: #d97706;
  --indigo: #4f46e5;
  --purple: #9333ea;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 10px 25px rgba(15, 23, 42, 0.14);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

button, input, select, textarea, a, .btn, .nav-btn, .pill {
  touch-action: manipulation;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Vector Icons */
.icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  flex-shrink: 0;
}
.icon-fill {
  fill: currentColor;
  stroke: none;
}
.i-24 { width: 24px; height: 24px; }
.i-22 { width: 22px; height: 22px; }
.i-20 { width: 20px; height: 20px; }
.i-18 { width: 18px; height: 18px; }
.i-16 { width: 16px; height: 16px; }
.i-14 { width: 14px; height: 14px; }
.i-12 { width: 12px; height: 12px; }

/* Global Keyframe Animations */
@keyframes paneFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes skeletonLoading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6); }
  70% { box-shadow: 0 0 0 5px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

@keyframes spinAnim {
  to { transform: rotate(360deg); }
}