/* ═══════════════════════════════════════════════════
   PREMIUM GAMING — Design Tokens
   ═══════════════════════════════════════════════════ */

:root {
  /* ── Color Palette ── */
  --color-primary:        #E8836B;
  --color-primary-light:  #F2A896;
  --color-primary-lighter:#FBE8E3;
  --color-primary-dark:   #C96550;

  --color-accent-peach:   #F5C1A8;
  --color-accent-coral:   #F09E8A;
  --color-accent-salmon:  #F4847A;
  --color-accent-lavender:#E8E0F0;
  --color-accent-mint:    #C3E8DB;
  --color-accent-sky:     #C5DBF5;

  --color-bg:             #F8F6F3;
  --color-bg-warm:        #FDF9F6;
  --color-surface:        #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-surface-muted:  #F3F1EE;

  --color-text-primary:   #1A1D2E;
  --color-text-secondary: #6B7084;
  --color-text-tertiary:  #9CA0B0;
  --color-text-inverse:   #FFFFFF;

  --color-border:         #E8E6E3;
  --color-border-light:   #F0EEEB;
  --color-divider:        #ECEAE7;

  --color-success:        #3DBB7D;
  --color-success-bg:     #E6F7EE;
  --color-warning:        #F5A623;
  --color-warning-bg:     #FFF5E5;
  --color-error:          #E54D5E;
  --color-error-bg:       #FDECEE;
  --color-info:           #5B8DEF;
  --color-info-bg:        #ECF1FD;

  /* ── Typography ── */
  --font-family:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs:         0.6875rem;  /* 11px */
  --font-size-sm:         0.75rem;    /* 12px */
  --font-size-base:       0.875rem;   /* 14px */
  --font-size-md:         1rem;       /* 16px */
  --font-size-lg:         1.125rem;   /* 18px */
  --font-size-xl:         1.25rem;    /* 20px */
  --font-size-2xl:        1.5rem;     /* 24px */
  --font-size-3xl:        1.875rem;   /* 30px */
  --font-size-4xl:        2.25rem;    /* 36px */

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:    1.2;
  --line-height-normal:   1.5;
  --line-height-relaxed:  1.7;

  /* ── Spacing ── */
  --space-1:   0.25rem;  /* 4px */
  --space-2:   0.5rem;   /* 8px */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.25rem;  /* 20px */
  --space-6:   1.5rem;   /* 24px */
  --space-8:   2rem;     /* 32px */
  --space-10:  2.5rem;   /* 40px */
  --space-12:  3rem;     /* 48px */
  --space-16:  4rem;     /* 64px */

  /* ── Radius ── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs:   0 1px 2px rgba(26, 29, 46, 0.04);
  --shadow-sm:   0 2px 6px rgba(26, 29, 46, 0.06);
  --shadow-md:   0 4px 12px rgba(26, 29, 46, 0.08);
  --shadow-lg:   0 8px 24px rgba(26, 29, 46, 0.10);
  --shadow-xl:   0 12px 36px rgba(26, 29, 46, 0.12);
  --shadow-glow: 0 4px 20px rgba(232, 131, 107, 0.25);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ── */
  --header-height:    56px;
  --bottom-nav-height:64px;
  --max-width:        480px;
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}