/* mOTTOSLOT — color tokens
   Base palette first, semantic aliases second. Brand is a near-black casino
   surface lit by one electric blue and one jackpot gold — everything else
   (win green, loss red) stays purely functional and low-frequency. */

:root {
  /* ---- base: neutrals (near-black surfaces, not true #000) ---- */
  --n-950: #060608;
  --n-900: #0a0a10;
  --n-850: #101018;
  --n-800: #16161f;
  --n-700: #212230;
  --n-600: #33344a;
  --n-500: #4d4f6b;
  --n-400: #71738f;
  --n-300: #9d9fb8;
  --n-200: #c7c8db;
  --n-100: #e6e7f0;
  --n-50:  #f5f5fa;
  --n-0:   #ffffff;

  /* ---- base: brand blue (from logo) ---- */
  --blue-900: #0d0060;
  --blue-700: #150094;
  --blue-600: #1a00c2;
  --blue-500: #2400ff; /* brand primary */
  --blue-400: #4b2fff;
  --blue-300: #7d68ff;
  --blue-200: #b3a8ff;
  --blue-100: #e0dcff;

  /* ---- base: jackpot gold (accent) ---- */
  --gold-700: #a3760a;
  --gold-600: #c99512;
  --gold-500: #f0b429; /* jackpot / big-win accent */
  --gold-400: #f7c94f;
  --gold-300: #fbdd8a;

  /* ---- base: semantic functional ---- */
  --green-500: #1fbf6b; /* win / credit / positive */
  --green-400: #4fd98c;
  --red-500:   #ef4444; /* loss / error / negative */
  --red-400:   #f87171;

  /* ---- semantic aliases: surfaces ---- */
  --surface-app: var(--n-950);
  --surface-base: var(--n-900);
  --surface-raised: var(--n-850);
  --surface-card: var(--n-800);
  --surface-overlay: rgba(6, 6, 8, 0.72);
  --surface-sunken: #030304;

  /* ---- semantic aliases: borders ---- */
  --border-subtle: var(--n-700);
  --border-default: var(--n-600);
  --border-strong: var(--n-500);
  --border-brand: var(--blue-500);

  /* ---- semantic aliases: text ---- */
  --text-primary: var(--n-0);
  --text-secondary: var(--n-300);
  --text-tertiary: var(--n-500);
  --text-disabled: var(--n-600);
  --text-on-brand: var(--n-0);
  --text-brand: var(--blue-400);
  --text-gold: var(--gold-500);
  --text-positive: var(--green-500);
  --text-negative: var(--red-500);
  --text-link: var(--blue-300);
  --text-link-hover: var(--blue-200);

  /* ---- semantic aliases: interactive ---- */
  --action-primary: var(--blue-500);
  --action-primary-hover: var(--blue-400);
  --action-primary-active: var(--blue-600);
  --action-gold: var(--gold-500);
  --action-gold-hover: var(--gold-400);
  --action-gold-active: var(--gold-600);
  --action-disabled-bg: var(--n-700);
  --action-disabled-text: var(--n-500);

  /* ---- semantic aliases: focus / glow ---- */
  --focus-ring: var(--blue-400);
  --glow-brand: rgba(36, 0, 255, 0.55);
  --glow-gold: rgba(240, 180, 41, 0.55);
}