/**
 * MyBoost design tokens (Figma UI kit: oLiCYK8jlTKmpNShW7W34g, page 504:1993)
 * Source frames: 504:1995 colors, 504:2488 fonts, 504:3565 buttons, 504:3644 elements
 */

:root {
  /* Figma general */
  --mb-white: #ffffff;
  --mb-dark: #070708;
  --mb-purple: #8104cb;
  --mb-magenta: #ff00bb;
  --mb-muted: rgba(143, 145, 166, 0.6);
  --mb-border: rgba(255, 255, 255, 0.08);
  --mb-surface-glass: rgba(255, 255, 255, 0.06);

  /* Game / product cover frames (Best Sellers + shop category grids) */
  --mb-cover-border: 3px solid rgba(255, 255, 255, 0.95);
  --mb-cover-border-width: 3px;
  --mb-cover-border-color: rgba(255, 255, 255, 0.95);

  /* Gradients (Figma ~26deg) */
  --mb-grad: linear-gradient(26.25deg, #8104cb 0%, #ff00bb 99.992%);
  --mb-grad-hover: linear-gradient(90deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.32) 100%), var(--mb-grad);
  --mb-grad-active: linear-gradient(90deg, rgba(65, 65, 65, 0.2) 0%, rgba(65, 65, 65, 0.2) 100%), var(--mb-grad);
  --mb-glow-button: 0 0 12px rgba(219, 61, 255, 0.3);

  /* Typography (Figma UI kit) */
  --mb-font-display: 'Pricedown Bl', 'Pricedown', Impact, sans-serif;
  --mb-font-heading: 'Anton', 'Barlow Condensed', Impact, sans-serif;
  --mb-font-body: 'Noto Sans', 'Inter', system-ui, sans-serif;
  --mb-font-accent: 'Orbitron', 'Barlow Condensed', sans-serif;

  /* Type scale */
  --mb-title-140: clamp(48px, 10vw, 140px);
  --mb-title-72: clamp(36px, 5vw, 72px);
  --mb-title-60: clamp(32px, 4.2vw, 60px);
  --mb-title-36: clamp(24px, 2.5vw, 36px);
  --mb-title-20: 20px;

  /* Hero headline — thick black outline (paint-order: stroke fill → ~half visible outside fill) */
  --hero-title-stroke: clamp(10px, 0.85vw, 14px);
  --hero-title-stroke-mobile: 2.5px;
  --hero-title-stroke-shadow:
    1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000,
    1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
    2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000,
    2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000,
    3px 0 0 #000, -3px 0 0 #000, 0 3px 0 #000, 0 -3px 0 #000,
    3px 3px 0 #000, -3px 3px 0 #000, 3px -3px 0 #000, -3px -3px 0 #000,
    4px 0 0 #000, -4px 0 0 #000, 0 4px 0 #000, 0 -4px 0 #000,
    4px 4px 0 #000, -4px 4px 0 #000, 4px -4px 0 #000, -4px -4px 0 #000,
    5px 0 0 #000, -5px 0 0 #000, 0 5px 0 #000, 0 -5px 0 #000,
    5px 5px 0 #000, -5px 5px 0 #000, 5px -5px 0 #000, -5px -5px 0 #000,
    6px 0 0 #000, -6px 0 0 #000, 0 6px 0 #000, 0 -6px 0 #000,
    6px 6px 0 #000;
  --hero-title-stroke-shadow-mobile:
    1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000,
    1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
    2px 2px 0 #000;

  /* Hero deco — car slightly above hero bottom; sticker outline on white CTA pill */
  --hero-car-bottom: 12px;
  --hero-cta-sticker-x: -6px;
  --hero-cta-sticker-y: 10px;

  /* Section headings — unified size + stroke sitewide */
  --mb-section-title-size: clamp(42px, 5.8vw, 68px);
  --mb-section-title-stroke: clamp(5px, 0.42vw, 7px);
  --mb-section-title-mobile: clamp(32px, 9vw, 40px);
  --mb-section-title-shadow:
    1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000,
    1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
    2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000,
    2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000,
    3px 0 0 #000, -3px 0 0 #000, 0 3px 0 #000, 0 -3px 0 #000,
    3px 3px 0 #000;

  /* How It Works — localized card glow (not full-section bg) + stroked headings */
  --hiw-card-glow: var(--hiw-glow-left);
  --hiw-title-size: var(--mb-section-title-size);
  --hiw-title-stroke: var(--mb-section-title-stroke);
  --hiw-step-title-size: clamp(26px, 2.6vw, 36px);
  --hiw-step-stroke: clamp(6px, 0.5vw, 9px);
  --hiw-step-stroke-mobile: 0;
  --hiw-step-stroke-shadow:
    1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000,
    1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
    2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000,
    2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000,
    3px 0 0 #000, -3px 0 0 #000, 0 3px 0 #000, 0 -3px 0 #000,
    3px 3px 0 #000, -3px 3px 0 #000, 3px -3px 0 #000, -3px -3px 0 #000,
    4px 0 0 #000, -4px 0 0 #000, 0 4px 0 #000, 0 -4px 0 #000,
    4px 4px 0 #000;
  --hiw-step-stroke-shadow-mobile:
    1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000,
    1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
    2px 2px 0 #000;
  --hiw-card-gap: 16px;
  --hiw-card-min-h: 188px;
  --hiw-card-pad-y: 40px;
  --hiw-card-pad-x: 36px;
  --hiw-card-radius: 32px;
  --hiw-num-size: 132px;
  --hiw-num-font-size: 56px;
  --hiw-num-color: #fff;
  --hiw-num-stroke: clamp(5px, 0.42vw, 7px);
  --hiw-num-stroke-mobile: 3px;
  --hiw-num-stroke-shadow:
    1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000,
    1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
    2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000,
    2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000,
    3px 0 0 #000, -3px 0 0 #000, 0 3px 0 #000, 0 -3px 0 #000,
    3px 3px 0 #000;
  --hiw-num-stroke-shadow-mobile:
    1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000,
    1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
    2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000,
    2px 2px 0 #000;
  --hiw-num-gradient: linear-gradient(135deg, #ff00bb 0%, #e600e6 26%, #9333ea 58%, #8104cb 100%);
  --hiw-figure-width: min(820px, 56vw);
  --hiw-figure-overhang: 0px;

  /* Trusted By Top Promoters — fan cards */
  --promo-title-size: var(--mb-section-title-size);
  --promo-title-stroke: var(--mb-section-title-stroke);
  --promo-card-w: 272px;
  --promo-card-h: 372px;
  --promo-card-overlap: -50px;
  --promo-card-pad: 32px 24px 28px;
  --promo-card-radius: 16px;
  --promo-viewport-h: 392px;
  --promo-avatar-size: 80px;
  --promo-avatar-mb: 18px;
  --promo-handle-size: clamp(17px, 1.35vw, 20px);
  --promo-badge-size: clamp(12px, 0.95vw, 14px);
  --promo-badge-pad: 6px 16px;
  --promo-badge-mt: 14px;
  --promo-count-size: clamp(14px, 1.1vw, 16px);
  --promo-count-pt: 22px;

  /* What Our Customers Say — fan cards */
  --review-title-size: var(--mb-section-title-size);
  --review-title-stroke: var(--mb-section-title-stroke);
  --review-card-w: 448px;
  --review-card-h: 380px;
  --review-card-overlap: -82px;
  --review-card-pad: 40px 36px 34px;
  --review-card-radius: 22px;
  --review-viewport-h: 412px;
  --review-avatar-size: 112px;
  --review-avatar-mb: 26px;
  --review-name-size: clamp(20px, 1.55vw, 24px);
  --review-text-size: clamp(16px, 1.2vw, 18px);
  --review-text-mt: 18px;

  --hiw-glow-left: linear-gradient(118deg, rgba(129, 4, 203, 0.62) 0%, rgba(255, 0, 187, 0.34) 52%, transparent 100%);
  --hiw-glow-right: linear-gradient(135deg, rgba(255, 0, 187, 0.28) 0%, rgba(255, 120, 0, 0.52) 42%, rgba(255, 210, 0, 0.46) 100%);
  --mb-body-16: 16px;
  --mb-body-14: 14px;
  --mb-body-12: 12px;

  /* Layout */
  --mb-radius-card: 20px;
  --mb-radius-input: 12px;
  --mb-radius-pill: 999px;
  --mb-radius-tag: 40px;
  --mb-btn-height: 60px;
  --mb-btn-min-width: 212px;
  --mb-content-max: 1280px;
  --mb-gutter: 24px;
  --mb-bg: var(--mb-dark);
  --mb-header-offset: 96px;

  /* Spacing */
  --mb-s1: 4px;
  --mb-s2: 8px;
  --mb-s3: 12px;
  --mb-s4: 16px;
  --mb-s5: 24px;
  --mb-s6: 32px;
  --mb-s7: 48px;
  --mb-s8: 64px;

  /* Legacy aliases used across main.css / homepage */
  --color-bg: var(--mb-dark);
  --color-bg-1: #0c0c0e;
  --color-bg-2: #121214;
  --color-card: var(--mb-surface-glass);
  --color-card-border: var(--mb-border);
  --color-primary: var(--mb-magenta);
  --color-primary-2: var(--mb-purple);
  --color-grad: var(--mb-grad);
  --color-grad-hero: var(--mb-grad);
  --color-text: var(--mb-white);
  --color-text-muted: rgba(255, 255, 255, 0.55);
  --font-heading: var(--mb-font-heading);
  --font-body: var(--mb-font-body);
  --font-pricedown: var(--mb-font-display);
  --radius-card: var(--mb-radius-card);
  --radius-pill: var(--mb-radius-pill);
  --container-max: var(--mb-content-max);
}