/* ═══════════════════════════════════════════════════════════════════
   QeepX Design Basement · TOKENS  (assets/css/qx-tokens.css)
   Structure, sizes and timings follow the live-party industry standard
   (Ola Party / Bigo / MICO · 1dp = 1px on a 375-wide frame).
   Colour is QeepX: Deep Cosmic Purple + Electric Lime.
   Prefix: --qx-*   (does not collide with style.css --purple/--lime)
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* ── Brand ──────────────────────────────────────────────────── */
  --qx-purple:        #7d137b;   /* primary brand */
  --qx-purple-deep:   #4a0a48;   /* dark brand / stage ground */
  --qx-purple-light:  #b04fae;   /* secondary accent, hover */
  --qx-lime:          #AADD00;   /* primary CTA: Send, JOIN, selected, follow  (= Ola #FFC102 role) */
  --qx-lime-pressed:  #c8ff00;   /* pressed CTA */
  --qx-lime-bright:   #d9ff33;   /* combo ring, recharge nudge, PK numbers   (= Ola #FFEF16 role) */
  --qx-lime-pale:     #e6ff8a;   /* highlighted words in chat               (= Ola #FFEC86 role) */
  --qx-sender:        #c8ff00;   /* sender name inside gift banner          (= Ola #FFDD00 role) */

  /* ── Semantic ───────────────────────────────────────────────── */
  --qx-danger:        #ff4f4f;   --qx-danger-pressed: #ff2323;
  --qx-success:       #11bb44;   --qx-speak: #00e989;      /* speaking ring */
  --qx-pk-red:        #ff4a6d;   --qx-pk-blue: #008cff;
  --qx-link:          #42ecff;
  --qx-gold:          #ffd245;   --qx-gold-deep: #b04d00;  /* avatar frames, crowns */

  /* ── Tab hues (each main tab owns a hue when active) ────────── */
  --qx-tab-home: #AADD00; --qx-tab-fun: #ff8617; --qx-tab-discover: #0391ff;
  --qx-tab-stream: #ff4684; --qx-tab-me: #936add;

  /* ── Light "utility" world (profile, wallet, lists) ─────────── */
  --qx-ink-900: #1d1122;  /* titles, names · warm near-black, never pure black */
  --qx-ink-800: #2b1f2e;  --qx-ink-700: #3a2d3d;
  --qx-ink-600: #6b5f6e;  /* meta row: age · location */
  --qx-ink-500: #9a8f9c;  /* secondary text, empty-seat names */
  --qx-ink-200: #ddd3dd;  --qx-ink-100: #eee6ee;   /* hints · dividers */
  --qx-surface:      #ffffff;
  --qx-surface-alt:  #f7f3f7;   /* 10px section gutters */
  --qx-surface-card: #faf6fa;   /* inner blocks r5 */

  /* ── Dark "stage" world (rooms, gift panel, effects) ────────── */
  --qx-stage-deep:   #1a001a;   /* room ground under theme image */
  --qx-stage-panel:  #2a1a30;   /* gift panel body, mention pill */
  --qx-stage-header: #1b0f21;   /* panel tab strip, receiver header */
  --qx-stage-purple: #4a0a48;   /* empty video seat ground */
  --qx-stage-bg: radial-gradient(120% 70% at 50% 0%, #4a1a6e 0%, #2a0f3a 45%, #1a001a 100%);
  --qx-scrim-50: rgba(0,0,0,.50); --qx-scrim-40: rgba(0,0,0,.40); --qx-scrim-35: rgba(0,0,0,.35);
  --qx-scrim-30: rgba(0,0,0,.30); --qx-scrim-20: rgba(0,0,0,.20); --qx-scrim-10: rgba(0,0,0,.10);
  --qx-glass-10: rgba(255,255,255,.10); --qx-glass-07: rgba(255,255,255,.07); --qx-glass-14: rgba(255,255,255,.14);
  --qx-on-dark-100: #ffffff; --qx-on-dark-75: rgba(255,255,255,.75); --qx-on-dark-70: rgba(255,255,255,.70);
  --qx-on-dark-40: rgba(255,255,255,.40); --qx-on-dark-35: rgba(255,255,255,.35);
  --qx-on-dark-hint: #a7aab7;   /* "Send a message…" placeholder */
  --qx-system-msg: #fbec98;     /* system / rules text */

  /* ── Tier ladder (levels read at 12px by hue, not by number) ── */
  --qx-tier-0: #9b9b9b;  --qx-tier-1: #59cb31;  --qx-tier-2: #2e71ff;
  --qx-tier-3: #9b4dfe;  --qx-tier-4: #ff8617;  --qx-tier-5: linear-gradient(135deg,#f93f55,#ffd700);
  --qx-lv-g0: linear-gradient(90deg,#8a8a8a,#b3b3b3);
  --qx-lv-g1: linear-gradient(90deg,#59cb31,#00e989);
  --qx-lv-g2: linear-gradient(90deg,#2e71ff,#00b4ff);
  --qx-lv-g3: linear-gradient(90deg,#9b4dfe,#df0ed8);
  --qx-lv-g4: linear-gradient(90deg,#ff8617,#ffc102);
  --qx-lv-g5: linear-gradient(90deg,#f93f55,#ffd700);

  /* ── Type (1sp = 1px @375) ──────────────────────────────────── */
  --qx-font-body:    system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --qx-font-num:     "Barlow Condensed", "Roboto Condensed", system-ui, sans-serif;   /* balances, timers, PK · tabular */
  --qx-font-display: "Bricolage Grotesque", "Lilita One", "Arial Black", system-ui, sans-serif; /* combo ×N, results */
  --qx-fs-7: 7px;   --qx-fs-8: 8px;   --qx-fs-9: 9px;   --qx-fs-10: 10px; --qx-fs-11: 11px;
  --qx-fs-12: 12px; --qx-fs-13: 13px; --qx-fs-14: 14px; --qx-fs-15: 15px; --qx-fs-16: 16px;
  --qx-fs-18: 18px; --qx-fs-20: 20px; --qx-fs-24: 24px;
  --qx-fs-d28: 28px; --qx-fs-d32: 32px; --qx-fs-d48: 48px;   /* display */
  --qx-fw-regular: 400; --qx-fw-medium: 500; --qx-fw-bold: 700; --qx-fw-display: 800;
  --qx-chat-line-extra: 3px;

  /* ── Spacing (4-pt with 2 and 6 micro steps) ────────────────── */
  --qx-sp-2: 2px; --qx-sp-4: 4px; --qx-sp-6: 6px; --qx-sp-8: 8px; --qx-sp-10: 10px; --qx-sp-12: 12px;
  --qx-sp-16: 16px; --qx-sp-20: 20px; --qx-sp-24: 24px; --qx-sp-32: 32px; --qx-sp-40: 40px; --qx-sp-48: 48px;
  --qx-gutter: 15px;     /* screen side gutter */
  --qx-row: 50px;        /* list row */
  --qx-sheet-pad: 20px;

  /* ── Radius ─────────────────────────────────────────────────── */
  --qx-r-2: 2px; --qx-r-3: 3px; --qx-r-4: 4px; --qx-r-5: 5px; --qx-r-6: 6px; --qx-r-8: 8px;
  --qx-r-10: 10px; --qx-r-13: 13px; --qx-r-14: 14px; --qx-r-15: 15px; --qx-r-16: 16px; --qx-r-20: 20px;
  --qx-r-full: 999px;

  /* ── Core sizes ─────────────────────────────────────────────── */
  --qx-frame-w: 375px;
  --qx-statusbar: calc(env(safe-area-inset-top, 0px) + 6px);   /* top safe space inside room: notch/status bar + 6px */
  --qx-topbar: 58px;             /* room top bar */
  --qx-titlebar: 48px;           /* generic title bar */
  --qx-topbar-icon: 28px;        /* round icons & pills h28 r14 */
  --qx-bottombar: 55px;          /* room bottom bar */
  --qx-bottom-safe: calc(55px + env(safe-area-inset-bottom, 0px));   /* bottom bar + home indicator: everything above the bar offsets by this */
  --qx-bottombar-icon: 35px;
  --qx-input-h: 32px;
  --qx-giftbtn: 35px;   /* same size as the other bottom-bar buttons (Bigo) · the glow ring, not the size, makes it stand out */
  --qx-tabbar: 50px; --qx-tab-icon: 38px;
  --qx-seat-w: 84px; --qx-seat-h: 102px; --qx-seat-av: 52px; --qx-seat-gap: 8px;   /* Ola 5.54 measured: 4x2 equal seats, pitch 92x102, circle ~50 */
  --qx-seat-w-compact: 64px; --qx-seat-av-compact: 50px;   /* 12–15 seat rooms */
  --qx-host-av: 70px;
  --qx-empty-seat-icon: 45px;
  --qx-seat-name-w: 56px;
  --qx-speak-ring: 92px;         /* pulse outer size for a 74 avatar; scales proportionally */
  --qx-minicard-av: 100px;
  --qx-medal-card: 26px; --qx-medal-wall: 50px;
  --qx-dialog-w: 310px; --qx-popup-w: 200px;
  --qx-btn-primary-h: 50px; --qx-btn-medium: 92px 36px;
  --qx-toast-bottom: 70px;
  --qx-emoji: 22px;
  --qx-touch-min: 44px;
  --qx-banner-h: 60px; --qx-banner-bg-w: 210px; --qx-banner-bg-h: 46px; --qx-banner-av: 34px; --qx-banner-gift: 38px;   /* compact */
  --qx-entrance-h: 50px;
  --qx-combo: 72px; --qx-combo-ring: 3px; --qx-combo-bottom: calc(var(--qx-bottom-safe) + 19px); --qx-combo-right: 14px;
  --qx-chat-maxw: 240px; --qx-chat-maxw-rail: 180px; --qx-chat-right-margin: 110px;
  --qx-gp-tabs: 32px; --qx-gp-receiver: 40px; --qx-gp-grid: 178px; --qx-gp-bar: 48px;   /* compact panel ≈ 300px */
  --qx-gp-cell-w: 81px; --qx-gp-cell-h: 84px; --qx-gp-img: 44px;
  --qx-barrage-h: 30px;
  --qx-pkbar-h: 22px;

  /* ── Z layers (bottom → top) ────────────────────────────────── */
  --qx-z-bg: 0; --qx-z-seats: 10; --qx-z-effects-mid: 20; --qx-z-chat: 30; --qx-z-rail: 35;
  --qx-z-bottombar: 40; --qx-z-sheet: 50; --qx-z-effects-top: 60; --qx-z-dialog: 70; --qx-z-toast: 80;

  /* ── Motion ─────────────────────────────────────────────────── */
  --qx-ease-enter:  cubic-bezier(.2,.8,.2,1);
  --qx-ease-exit:   cubic-bezier(.4,0,1,1);
  --qx-ease-spring: cubic-bezier(.34,1.56,.64,1);
  --qx-t-tap: 150ms;
  --qx-t-sheet-in: 260ms; --qx-t-sheet-out: 220ms;
  --qx-t-banner-in: 300ms; --qx-t-banner-hold: 2500ms; --qx-t-banner-out: 250ms;
  --qx-t-combo-window: 3000ms; --qx-t-combo-punch: 350ms;
  --qx-t-speak-pulse: 800ms;
  --qx-t-effect-mid: 2000ms; --qx-t-effect-full: 3500ms;
  --qx-t-entrance: 3000ms; --qx-t-mount: 4500ms; --qx-t-mount-full: 7000ms;
  --qx-t-barrage: 6000ms;
  --qx-t-pk-bar: 600ms;
  --qx-t-toast: 2000ms;
  --qx-t-seat-join: 400ms;
  --qx-t-balance-roll: 200ms;
}

/* Reduced motion: everything rests, rings go static, effects degrade to banner-only (JS reads this too) */
@media (prefers-reduced-motion: reduce) {
  :root { --qx-t-speak-pulse: 0ms; --qx-t-effect-mid: 0ms; --qx-t-effect-full: 0ms; }
}