/* ========================================================================
   XBOT — Shared Design Tokens
   Single source of truth for color / type / spacing / motion across the
   main site (site.css) and the standalone Lucky Draw game pages
   (games/ls.css, games/ny.css). Included first, before any page stylesheet.
   ======================================================================== */

:root {
    /* ── Base surfaces: pure black / deep charcoal ── */
    --bg:            #08080a;
    --bg-1:          #0e0e11;
    --bg-2:          #17171b;
    --surface-1:     #16161a;
    --surface-2:     #1d1d22;
    --surface-3:     #24242b;

    --border:        rgba(255,255,255,0.07);
    --border-hover:  rgba(255,255,255,0.16);
    --border-accent: rgba(232,255,61,0.35);
    --border-glass:  rgba(255,255,255,0.09);

    /* ── Signal colors: applied selectively, never as large fills ── */
    --rank:          #E8FF3D;   /* neon yellow — ranking / status / live */
    --rank-dim:      rgba(232,255,61,0.14);
    --rank-glow:     rgba(232,255,61,0.35);
    --rank-ink:      #12140a;   /* text-on-yellow */

    --reward:        #FF7A1A;   /* orange — rewards / actions / Lucky Draw */
    --reward-dim:    rgba(255,122,26,0.15);
    --reward-glow:   rgba(255,122,26,0.35);
    --reward-light:  #FF9A4D;
    --reward-dark:   #D9600A;

    --info:          #2FA8FF;   /* electric blue — Cricket / nav / secondary */
    --info-dim:      rgba(47,168,255,0.14);
    --info-glow:     rgba(47,168,255,0.32);
    --info-light:    #6CC2FF;

    /* Legacy aliases so unedited selectors in site.css/ls.css/ny.css that
       still reference the old token names keep working during the rewrite. */
    --accent:        var(--reward);
    --accent-dim:    var(--reward-dim);
    --accent-glow:   var(--reward-glow);
    --accent-light:  var(--reward-light);
    --accent-dark:   var(--reward-dark);
    --accent-subtle: var(--reward-dim);
    --accent-hover:  rgba(255,122,26,0.22);
    --purple:        var(--info);
    --purple-dark:   #1E7FD1;
    --purple-dim:    var(--info-dim);
    --purple-glow:   var(--info-glow);
    --purple-light:  var(--info-light);
    --cyan:          var(--info);
    --cyan-dim:      var(--info-dim);
    --cyan-bg:       var(--info-dim);
    --emerald:       #2FE38A;
    --emerald-dim:   rgba(47,227,138,0.14);
    --emerald-bg:    rgba(47,227,138,0.10);
    --rose:          #FF4D6A;
    --rose-bg:       rgba(255,77,106,0.12);
    --orange:        var(--reward);
    --orange-d:      var(--reward-dark);
    --orange-l:      var(--reward-light);
    --yellow:        var(--rank);
    --blue:          var(--info);

    /* Secondary ("game"/info) button treatment — flat, no gradient/glow */
    --gradient-btn:  var(--info);
    --shadow-btn:    inset 0 0 0 1px rgba(255,255,255,0.08);

    --gold:          #E8FF3D;
    --silver:        #C8CDD6;
    --bronze:        #E08A4B;

    /* ── Text ── */
    --text:          #F4F4F2;
    --text2:         rgba(244,244,242,0.76);
    --text-mid:      #9C9CA4;
    --text-muted:    #6C6C74;
    --text3:         #6C6C74;
    --text-white:    #ffffff;

    --bg-surface:    var(--surface-1);
    --bg-elevated:   var(--surface-2);
    --bg-card:       var(--surface-1);
    --bg-card-hover: var(--surface-2);
    --bg-translucent: rgba(10,10,12,0.88);

    /* ── Typography: rounded interface face + technical display face ── */
    --font:         'M PLUS Rounded 1c', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-h:       'M PLUS Rounded 1c', -apple-system, sans-serif;
    --font-display: 'Chakra Petch', 'M PLUS Rounded 1c', sans-serif;
    --font-logo:    'Chakra Petch', sans-serif;
    --mono:         'JetBrains Mono', 'Fira Code', monospace;

    /* ── Radii: thin structural lines over uniform rounded containers ── */
    --radius:    6px;
    --radius-sm: 4px;
    --radius-lg: 10px;
    --radius-xl: 14px;

    /* ── Shadows: restrained, no ambient glow fields ── */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.5);
    --shadow-sm: 0 1px 4px rgba(0,0,0,0.55);
    --shadow:    0 6px 24px rgba(0,0,0,0.5);
    --shadow-lg: 0 16px 48px rgba(0,0,0,0.6);
    --shadow-glow: 0 0 0 rgba(0,0,0,0);

    /* ── Motion ── */
    --dur-fast: 0.16s;
    --dur-base: 0.28s;
    --dur-slow: 0.5s;
    --transition:      var(--dur-fast) cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: var(--dur-slow) cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring:     cubic-bezier(0.34, 1.2, 0.64, 1);
    --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);

    /* No decorative multi-stop gradients — flat signal color or a two-stop
       tonal ramp of the same hue only. */
    --gradient:      linear-gradient(135deg, var(--reward), var(--reward-light));
    --gradient-warm: linear-gradient(135deg, var(--reward), var(--reward-dark));
    --gradient-text: linear-gradient(90deg, var(--reward), var(--reward-light));

    /* ── Breakpoints (informational — media queries can't read custom
       properties, kept here as the documented source of truth) ──
       xs:320  sm:360  md:390  lg:430  tablet:768  desktop:1024  wide:1440 */
}