/* ============ BOXLOQ SHARED DESIGN TOKENS ============
   Used by every frontend surface (user, courier, admin) so the brand stays
   consistent as each area is built independently. Fixed dark product
   identity by design — see each page's own <style> for surface-specific
   layout (phone-frame chrome for user/courier, dashboard shell for admin). */
:root{
  --bg: #110F0D;
  --bg-glow-1: #2A1608;
  --bg-glow-2: #1a1310;
  --surface: #1C1917;
  --surface-2: #24201D;
  --surface-selected: #2C2521;
  --border: #34302C;
  --border-strong: #47403A;
  --text: #F5F1EA;
  --text-muted: #A69C90;
  --text-faint: #776E65;
  --accent-1: #FF7A1A;
  --accent-2: #FFC24D;
  --accent-solid: #FF8A2A;
  --success: #38C784;
  --danger: #E5484D;
  --focus: #FFC24D;

  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

*,*::before,*::after{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  min-height:100vh;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}