/* ============================================================
  PlayBrain — Design Tokens / CSS Variables
   Paleta inspirada em Linx.com.br (roxo + laranja)
   ============================================================ */

:root {
  /* ── Primary: Purple ── */
  --color-primary:        #4B1082;
  --color-primary-dark:   #2D0855;
  --color-primary-mid:    #6B21A8;
  --color-primary-light:  #9333EA;
  --color-primary-subtle: #F5F0FF;

  /* ── Accent: Orange ── */
  --color-accent:        #F58220;
  --color-accent-dark:   #D4600A;
  --color-accent-light:  #FFA040;
  --color-accent-subtle: #FFF4E8;

  /* ── Game Palette (PlayBrain) ── */
  --color-game-red:    #EF4444;
  --color-game-blue:   #3B82F6;
  --color-game-green:  #22C55E;
  --color-game-yellow: #F59E0B;
  --color-game-purple: #8B5CF6;
  --color-game-pink:   #EC4899;
  --color-game-teal:   #14B8A6;
  --color-game-orange: #F97316;

  /* ── Neutrals ── */
  --color-white:    #FFFFFF;
  --color-gray-50:  #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;

  /* ── Semantic ── */
  --color-success:    #22C55E;
  --color-success-bg: #F0FDF4;
  --color-warning:    #F59E0B;
  --color-warning-bg: #FFFBEB;
  --color-error:      #EF4444;
  --color-error-bg:   #FEF2F2;
  --color-info:       #3B82F6;
  --color-info-bg:    #EFF6FF;

  /* ── Backgrounds ── */
  --bg-page:    #FFFFFF;
  --bg-light:   #F8F5FF;
  --bg-section: #F3F4F6;

  /* ── Text ── */
  --text-primary:   #1A1A2E;
  --text-secondary: #4B5563;
  --text-muted:     #9CA3AF;
  --text-inverse:   #FFFFFF;

  /* ── Typography ── */
  --font-family:   'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;
  --font-size-3xl:  1.875rem;
  --font-size-4xl:  2.25rem;
  --font-size-5xl:  3rem;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semi:    600;
  --font-weight-bold:    700;
  --font-weight-black:   900;
  --line-height-tight:  1.25;
  --line-height-normal: 1.5;
  --line-height-loose:  1.75;

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

  /* ── Border Radius ── */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-3xl:  2rem;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:     0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:     0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);
  --shadow-lg:     0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-xl:     0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);
  --shadow-purple: 0 4px 20px rgba(75, 16, 130, 0.3);
  --shadow-orange: 0 4px 20px rgba(245, 130, 32, 0.4);
  --shadow-card:   0 2px 12px rgba(75, 16, 130, 0.08);

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

  /* ── Z-index ── */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-fixed:    300;
  --z-modal:    400;
  --z-tooltip:  500;

  /* ── Container ── */
  --container-max:     1200px;
  --container-padding: 1.5rem;

  /* ── Header ── */
  --header-height: 82px;
}

/* Dark mode support (future) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-page:    #0F0A1E;
    --bg-light:   #1A1030;
    --bg-section: #150C28;
    --text-primary:   #F9FAFB;
    --text-secondary: #D1D5DB;
    --text-muted:     #6B7280;
    --color-gray-100: #1F2937;
    --color-gray-200: #374151;
  }
}