:root {
  /* ── Brand palette ───────────────────────────────────── */
  --color-orange:      #FC6200;
  --color-orange-600:  #EF5D00;
  --color-orange-700:  #E35800;
  --color-orange-800:  #D65300;
  --color-orange-900:  #CA4E00;
  --color-orange-950:  #BD4A00;
  --color-orange-1000: #B04500;

  --color-black:       #0C0C18;
  --color-black-900:   #0B0B17;
  --color-black-800:   #0A0A16;
  --color-black-700:   #090915;
  --color-black-600:   #080814;
  --color-black-500:   #070713;
  --color-black-400:   #060612;

  --color-white:       #FFFFFF;
  --color-gray-100:    #F2F2F2;
  --color-gray-200:    #E5E5E5;
  --color-gray-300:    #D9D9D9;
  --color-gray-400:    #CCCCCC;
  --color-gray-500:    #BFBFBF;
  --color-gray-600:    #B2B2B2;

  /* ── Typography ─────────────────────────────────────── */
  --font-heading: "Zalando Sans Expanded", "Roboto Flex", "Arial Black", Arial, sans-serif;
  --font-display: var(--font-heading);  /* alias: keeps existing components working */
  --font-body:    Manrope, Arial, sans-serif;

  /* ── Gradients ──────────────────────────────────────── */
  --gradient-page-bg:    linear-gradient(180deg, var(--color-black-600) 0%, var(--color-black) 60%, var(--color-black-900) 100%);
  --gradient-loader-bg:  linear-gradient(160deg, var(--color-black-600) 0%, var(--color-black) 100%);
  --gradient-button:     linear-gradient(135deg, var(--color-orange) 0%, var(--color-orange-600) 100%);
  --gradient-button-hover: linear-gradient(135deg, var(--color-orange-700) 0%, var(--color-orange-800) 100%);

  /* ── Shadows / Glow ─────────────────────────────────── */
  --glow-orange:         0 0 24px rgba(252, 98, 0, 0.45);
  --glow-orange-strong:  0 0 48px rgba(252, 98, 0, 0.65);
  --shadow-button:       0 4px 20px rgba(0,0,0,0.5), 0 0 20px rgba(252,98,0,0.35);
  --shadow-button-hover: 0 6px 28px rgba(0,0,0,0.6), 0 0 36px rgba(252,98,0,0.55);

  /* ── Stroke emulation via text-shadow ───────────────── */
  --text-stroke-orange:
    0 -2px 1px var(--color-orange-900), -1px -1px 1px var(--color-orange-900),
    0 -1px 1px var(--color-orange-900),  1px -1px 1px var(--color-orange-900),
   -2px 0   1px var(--color-orange-900), -1px 0   1px var(--color-orange-900),
    0   0   1px var(--color-orange-900),  1px 0   1px var(--color-orange-900),
    2px 0   1px var(--color-orange-900), -1px 1px 1px var(--color-orange-900),
    0   1px 1px var(--color-orange-900),  1px 1px 1px var(--color-orange-900),
    0   2px 1px var(--color-orange-900);

  --text-stroke-dark:
    0 -2px 1px rgba(0,0,0,.9), -1px -1px 1px rgba(0,0,0,.9),
    0 -1px 1px rgba(0,0,0,.9),  1px -1px 1px rgba(0,0,0,.9),
   -2px 0   1px rgba(0,0,0,.9), -1px 0   1px rgba(0,0,0,.9),
    1px 0   1px rgba(0,0,0,.9),  2px 0   1px rgba(0,0,0,.9),
   -1px 1px 1px rgba(0,0,0,.9),  0   1px 1px rgba(0,0,0,.9),
    1px 1px 1px rgba(0,0,0,.9),  0   2px 1px rgba(0,0,0,.9);

  /* ── Z-index scale ───────────────────────────────────── */
  --z-loader:        999;
  --z-effects-boom:  600;  /* above spin-bonus-overlay (500): flash plays over popup, hides after 1.1s */
  --z-modal:         100;
  --z-game-actions:    8;
  --z-brand:           7;
  --z-character:      20;
  --z-slot-frame:      2;
  --z-slot-reels:      3;
  --z-modal-item:     11;
  --z-modal-bg-layer:  5;

  /* ── Layout ─────────────────────────────────────────── */
  --max-width-desktop: 1200px;
  --slot-height-em:    70em;

  /* ── Fluid font-size base (4.5px–10px across 375–1920px) */
  --fluid-base: min(4.5px + 5.5 * (100vw - 375px) / 1545, 10px);
}