/* ============================================================
   GENIES PAY — Design Tokens
   "Payment, at the edge."
   The acceptance brand: the terminal, the phone, the QR code
   and the SDK. Warm, saturated, device-shaped. This is the only
   product in the family a member of the public touches.
   ============================================================ */

:root {
  /* --- Surface & ink -------------------------------------- */
  --bg:          #120B09;   /* espresso black — warm, not blue  */
  --bg-raise:    #1A1210;   /* raised surface                   */
  --panel:       #221815;   /* device / card surface            */
  --panel-2:     #2C201C;   /* hover / elevated                 */
  --panel-3:     #3A2A24;   /* wells, tracks, unlit segments    */
  --line:        rgba(255, 238, 230, 0.10);
  --line-strong: rgba(255, 238, 230, 0.22);
  --ink:         #FDF2EC;   /* warm white                       */
  --ink-dim:     #BBA79E;   /* secondary                        */
  --ink-faint:   #8A756C;   /* captions                         */
  --on-brand:    #220A02;   /* text on a brand-filled surface   */

  /* --- Brand ----------------------------------------------- */
  --surge:       #FF6B35;   /* coral-orange — the signature     */
  --surge-soft:  rgba(255, 107, 53, 0.15);
  --flare:       #FF2E88;   /* hot magenta — the counterweight  */
  --flare-soft:  rgba(255, 46, 136, 0.14);
  --grad:        linear-gradient(118deg, #FF6B35 0%, #FF4A5E 48%, #FF2E88 100%);

  /* --- States ---------------------------------------------- */
  --ok:          #35D9A0;   /* approved, attested, verified     */
  --ok-soft:     rgba(53, 217, 160, 0.14);
  --warn:        #FFC145;   /* expiring, pending, low           */
  --warn-soft:   rgba(255, 193, 69, 0.14);
  --stop:        #FF4B4B;   /* declined, blocked, tampered      */
  --stop-soft:   rgba(255, 75, 75, 0.14);

  /* --- Typography ------------------------------------------ */
  --font-display: "Outfit", system-ui, sans-serif;
  --font-body:    "Manrope", system-ui, -apple-system, sans-serif;
  --font-mono:    "Space Mono", "SFMono-Regular", Consolas, monospace;

  /* --- Rhythm ---------------------------------------------- */
  --w-max:  1180px;
  --w-wide: 1380px;
  --pad-x:  clamp(20px, 5vw, 60px);
  --sec-y:  clamp(72px, 9vw, 134px);
  --r:      18px;             /* rounded — this brand is a device */
  --r-sm:   11px;
  --r-lg:   26px;

  /* --- Motion ---------------------------------------------- */
  --ease-out: cubic-bezier(0.18, 1, 0.3, 1);
  --ease-io:  cubic-bezier(0.62, 0, 0.35, 1);
  --dur-1: 200ms;
  --dur-2: 480ms;
  --dur-3: 940ms;

  /* --- Elevation — this brand is allowed weight ------------ */
  --sh-1: 0 2px 6px rgba(0, 0, 0, 0.4);
  --sh-2: 0 12px 30px rgba(0, 0, 0, 0.5);
  --sh-3: 0 34px 70px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(255, 238, 230, 0.06) inset;
  --sh-brand: 0 14px 40px rgba(255, 107, 53, 0.34);

/* ------------------------------------------------------------
   PLATFORM BRIDGE
   Maps this brand onto the eight variables the shared platform
   chrome reads (consent bar, form reply, exit panel, film
   lightbox). Same behaviour on all five sites, same markup —
   but the shape, the typeface and the colour are this site's.
   ------------------------------------------------------------ */
  --tp-bg:        var(--panel);
  --tp-ink:       var(--ink);
  --tp-dim:       var(--ink-dim);
  --tp-line:      var(--line-strong);
  --tp-accent:    var(--surge);
  --tp-on-accent: var(--on-brand);
  --tp-radius:    var(--r);
  --tp-font:      var(--font-display);
  --tp-shadow:    0 20px 52px rgba(0, 0, 0, .55);

}