/* ═══════════════════════════════════════════════════
   ROYAL POS — Design Tokens v2 (Modern Stylish)
   ═══════════════════════════════════════════════════ */
:root {
  /* Brand */
  --rp-blue:         #0f2557;
  --rp-blue-mid:     #1a3a8f;
  --rp-blue-dark:    #080f2e;
  --rp-blue-glass:   rgba(15,37,87,0.55);
  --rp-orange:       #f4601a;
  --rp-orange-glow:  rgba(244,96,26,0.35);
  --rp-orange-dark:  #d04d10;
  --rp-orange-light: #ff8c52;

  /* Neutral */
  --rp-white:    #ffffff;
  --rp-off:      #f7f8fc;
  --rp-gray-50:  #f0f2f8;
  --rp-gray-100: #e1e5f0;
  --rp-gray-200: #c8cedf;
  --rp-gray-400: #8892b0;
  --rp-gray-600: #4a5578;
  --rp-gray-800: #1a2240;

  /* Accent */
  --rp-teal:   #00c9a7;
  --rp-purple: #6c5ce7;

  /* Typography */
  --font-display: 'Poppins', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* Sizing */
  --nav-h:    72px;
  --sec-py:   90px;
  --cont:     1240px;

  /* Radius */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  32px;
  --r-pill:9999px;

  /* Shadows */
  --sh-sm: 0 2px 12px rgba(15,37,87,0.08);
  --sh-md: 0 8px 32px rgba(15,37,87,0.12);
  --sh-lg: 0 20px 60px rgba(15,37,87,0.18);
  --sh-xl: 0 32px 80px rgba(15,37,87,0.24);
  --sh-orange: 0 8px 32px rgba(244,96,26,0.4);

  /* Transitions */
  --t-fast:  all 0.18s cubic-bezier(.4,0,.2,1);
  --t-base:  all 0.28s cubic-bezier(.4,0,.2,1);
  --t-slow:  all 0.5s  cubic-bezier(.4,0,.2,1);
  --t-spring:all 0.4s  cubic-bezier(0.34,1.56,0.64,1);
}