/* ==========================================================================
   OKAY POS Mobile Companion - Modern Design Tokens & Variables (Sleek Onyx Black Theme)
   ========================================================================== */
:root {
  /* Brand Primary Accents (Premium Onyx Black & Obsidian Slate) */
  --primary: #090d16;
  --primary-hover: #182030;
  --primary-dark: #000000;
  --primary-light: rgba(9, 13, 22, 0.07);
  --primary-glow: rgba(9, 13, 22, 0.22);
  --primary-gradient: linear-gradient(135deg, #090d16 0%, #1e293b 100%);
  --hero-gradient: linear-gradient(135deg, #090d16 0%, #0f172a 55%, #1e293b 100%);
  --accent-gradient: linear-gradient(135deg, #090d16 0%, #334155 100%);

  /* Surface & Base Colors */
  --dark: #090d16;
  --dark-surface: #182030;
  --dark-card: #0f172a;
  --bg: #f8fafc;
  --bg-subtle: #f1f5f9;
  --card-bg: #ffffff;
  --card-border: #e2e8f0;
  --card-border-subtle: #edf2f7;

  /* Typography Colors */
  --text: #090d16;
  --text-heading: #000000;
  --text-muted: #64748b;
  --text-secondary: #334155;
  --text-light: #94a3b8;

  /* Borders & Inputs */
  --border: #e2e8f0;
  --border-focus: #090d16;
  --border-light: #f1f5f9;
  --input-bg: #ffffff;
  --input-border: #cbd5e1;

  /* Status Colors */
  --success: #10b981;
  --success-dark: #059669;
  --success-light: rgba(16, 185, 129, 0.12);
  --danger: #ef4444;
  --danger-dark: #dc2626;
  --danger-light: rgba(239, 68, 68, 0.12);
  --warn: #f59e0b;
  --warn-dark: #d97706;
  --warn-light: rgba(245, 158, 11, 0.12);
  --info: #0284c7;
  --info-light: rgba(2, 132, 199, 0.12);
  --purple: #7c3aed;
  --purple-light: rgba(124, 58, 237, 0.12);

  /* Modern Smooth Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Layered Ambient Drop Shadows (Real App Depth) */
  --shadow-xs: 0 1px 2px rgba(9, 13, 22, 0.04);
  --shadow-sm: 0 1px 3px rgba(9, 13, 22, 0.06), 0 1px 2px rgba(9, 13, 22, 0.04);
  --shadow-md: 0 4px 14px -1px rgba(9, 13, 22, 0.08), 0 2px 6px -1px rgba(9, 13, 22, 0.04);
  --shadow-lg: 0 10px 25px -3px rgba(9, 13, 22, 0.12), 0 4px 10px -2px rgba(9, 13, 22, 0.05);
  --shadow-xl: 0 20px 35px -5px rgba(9, 13, 22, 0.16), 0 8px 16px -4px rgba(9, 13, 22, 0.08);
  --shadow-card: 0 2px 10px rgba(9, 13, 22, 0.04), 0 1px 3px rgba(9, 13, 22, 0.03);
}

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

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

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

/* 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 & Micro-Interactions */
@keyframes paneFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

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

@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

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

@keyframes popIn {
  0% { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}