/* candy-kit design tokens.
 * Default values = a neutral dark-indigo theme that follows the reference layout's structure.
 * Games override any of these in their own theme file, loaded AFTER this one, e.g.
 *   :root { --ck-accent: #FF2E88; --ck-cta-gradient: linear-gradient(...); }
 * or scoped: .ck-shell.sr-theme { ... }. kit.css only ever reads these properties.
 *
 * Design rules the defaults encode (keep them when theming):
 *  - surfaces step up in lightness: bg < frame < surface-1 (panel) < surface-2 (card/row) < surface-hover;
 *    surface-3 is the INSET (inputs, tab track, stepper box), darker than the panel it sits in;
 *  - edges are 1px hairlines (--ck-line), shadows only on floating layers (popover, modal, drawer);
 *  - the accent is reserved for the primary CTA, the active tab, focus and small highlights;
 *  - spacing is a 4/8 scale, radii 6 (small) / 8 (controls) / 10 (cards) / 14 (panels).
 */
:root {
  color-scheme: dark;

  /* ---- surfaces ---- */
  --ck-bg: #0b0b12;                 /* page behind the app frame */
  --ck-frame: #13131e;              /* app frame + columns */
  --ck-frame-border: rgba(255, 255, 255, 0.06);
  --ck-col-divider: rgba(255, 255, 255, 0.06);
  --ck-surface-1: #1a1a28;          /* panels: bet panel, feed card, popover */
  --ck-surface-2: #222233;          /* cards: rows, raised controls, icon buttons */
  --ck-surface-3: #0f0f18;          /* insets: inputs, tab track, stepper box */
  --ck-surface-hover: #2a2a3e;
  --ck-surface-active: #31314a;     /* active tab, pressed */
  --ck-modal-bg: #1c1c2b;
  --ck-modal-card: #232335;
  --ck-scrim: rgba(5, 5, 10, 0.7);
  --ck-line: rgba(255, 255, 255, 0.07);
  --ck-line-strong: rgba(255, 255, 255, 0.14);

  /* ---- text ---- */
  --ck-text: #f4f4f8;
  --ck-text-muted: #9b9bb0;
  --ck-text-dim: #6a6a80;
  --ck-text-on-accent: #ffffff;

  /* ---- accent / CTA ---- */
  --ck-accent: #6d5cff;
  --ck-accent-2: #9a8cff;
  --ck-accent-soft: rgba(109, 92, 255, 0.16);
  --ck-cta-gradient: linear-gradient(180deg, #7a6aff 0%, #6352f5 100%);
  --ck-cta-glow: none;
  --ck-cta-text: #ffffff;
  --ck-cashout-gradient: linear-gradient(180deg, #2ccfa6 0%, #1fb891 100%);
  --ck-cashout-text: #04201a;
  --ck-cancel-bg: #2e2a3c;
  --ck-cancel-text: #f4f4f8;
  --ck-progress: var(--ck-accent);
  --ck-close-bg: var(--ck-surface-2);
  --ck-close-fg: var(--ck-text-muted);
  --ck-close-border: var(--ck-line);

  /* ---- states ---- */
  --ck-win: #f2b33d;                /* win amounts (gold) */
  --ck-success: #34c58f;
  --ck-danger: #f0506e;
  --ck-warn: #f2a43d;
  --ck-info: #5b8def;
  --ck-status-live: #34c58f;        /* header status dot */
  --ck-status-idle: #6a6a80;
  --ck-status-offline: #f0506e;
  --ck-focus: #8fb4ff;
  --ck-cashed-tint: rgba(52, 197, 143, 0.08);   /* cashed-out row background tint */

  /* ---- multiplier tiers (pills, chips): saturated solid fills, white text ---- */
  --ck-tier-low-bg: #3d63d6;  --ck-tier-low-fg: #ffffff;
  --ck-tier-mid-bg: #7546d8;  --ck-tier-mid-fg: #ffffff;
  --ck-tier-high-bg: #d98c12; --ck-tier-high-fg: #ffffff;
  --ck-tier-none-bg: transparent; --ck-tier-none-fg: var(--ck-text-dim);
  --ck-chip-current-bg: #34344d;
  --ck-chip-current-fg: #ffffff;

  /* ---- pills (key/value chips, top-bar pills) ---- */
  --ck-pill-bg: var(--ck-surface-2);
  --ck-pill-fg: var(--ck-text);
  --ck-pill-label: var(--ck-text-muted);

  /* ---- avatars (8 slots, muted and varied) ---- */
  --ck-avatar-0: #5b6fc4; --ck-avatar-1: #8a5bb8; --ck-avatar-2: #3e8f86; --ck-avatar-3: #b5803a;
  --ck-avatar-4: #a8566e; --ck-avatar-5: #4f8bb3; --ck-avatar-6: #6f9a4e; --ck-avatar-7: #77768c;
  --ck-avatar-fg: #ffffff;

  /* ---- stage ---- */
  --ck-stage-bg: linear-gradient(160deg, #262448 0%, #181731 60%, #121124 100%);
  --ck-stage-border: rgba(255, 255, 255, 0.06);
  --ck-mult-color: #ffffff;
  --ck-mult-gradient: linear-gradient(180deg, #ffffff 0%, #ffe2a8 100%);
  --ck-mult-glow: none;
  --ck-mult-crashed: #f0506e;
  --ck-mult-cashed: #34c58f;
  --ck-trail-color: rgba(255, 238, 200, 0.95);
  --ck-trail-glow: rgba(255, 196, 87, 0.3);
  --ck-wait-track: rgba(255, 255, 255, 0.12);
  --ck-wait-fill: var(--ck-accent);

  /* ---- shape ---- */
  --ck-radius-frame: 16px;
  --ck-radius-panel: 14px;
  --ck-radius-card: 10px;
  --ck-radius-row: 8px;
  --ck-radius-pill: 8px;
  --ck-radius-chip: 6px;
  --ck-radius-input: 8px;
  --ck-radius-round: 999px;
  --ck-shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.07);

  /* ---- spacing (4/8 scale) ---- */
  --ck-space-1: 4px;
  --ck-space-2: 8px;
  --ck-space-3: 12px;
  --ck-space-4: 16px;
  --ck-space-5: 20px;
  --ck-space-6: 24px;

  /* ---- layout ---- */
  --ck-left-w: 320px;
  --ck-left-w-tablet: 296px;
  --ck-right-w: 288px;
  --ck-right-rail: 64px;
  --ck-col-pad: 16px;
  --ck-gap: 12px;
  --ck-topbar-h: 64px;
  --ck-row-h: 36px;
  --ck-chip-h: 26px;
  --ck-chip-w: 58px;
  --ck-control-h: 36px;            /* desktop icon buttons, pills, tabs */
  --ck-input-h: 40px;              /* desktop inputs, stepper, x-box */
  --ck-hit: 44px;                  /* minimum tap target on phones */
  --ck-cta-h: 72px;
  --ck-drawer-w: min(340px, 88%);

  /* ---- typography ---- */
  --ck-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ck-font-display: var(--ck-font);
  --ck-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ck-fs-xs: 12px;                /* labels, captions (never smaller) */
  --ck-fs-sm: 13px;                /* list rows, chips, secondary text */
  --ck-fs-md: 14px;                /* base */
  --ck-fs-lg: 16px;
  --ck-fs-xl: 18px;                /* bet amount, CTA */
  --ck-fs-2xl: 24px;
  --ck-fs-mult: clamp(48px, 10cqi, 128px);
  --ck-fw-regular: 400;
  --ck-fw-medium: 500;
  --ck-fw-semibold: 600;
  --ck-fw-bold: 700;
  --ck-fw-black: 800;
  --ck-tracking-caps: .06em;        /* uppercase section titles / CTA */

  /* ---- motion ---- */
  --ck-ease: cubic-bezier(.2, .8, .2, 1);
  --ck-dur: 140ms;
}