/* =============================================================
   mygamesandi — Design Tokens
   Elite Gamer Arena — Dark Theme (Phase 2)
   Single source of truth for all CSS custom properties.
   ============================================================= */

/* ─── LEGACY warm tambayan theme (Phase 1 rollback reference) ─
:root {
  --color-red:            #C0392B;
  --color-amber:          #E67E22;
  --color-green:          #27AE60;
  --color-cream:          #FDF6EC;
  --color-red-light:      #F1948A;
  --color-red-xlight:     #FDEDEC;
  --color-red-dark:       #922B21;
  --color-amber-light:    #F0B27A;
  --color-amber-xlight:   #FEF9E7;
  --color-amber-dark:     #BA6A1C;
  --color-green-light:    #82E0AA;
  --color-green-xlight:   #EAFAF1;
  --color-green-dark:     #1E8449;
  --color-ink:            #1A1A2E;
  --color-ink-soft:       #4A4A6A;
  --color-ink-muted:      #8888A8;
  --color-border:         #E8DDD0;
  --color-surface:        #FFFFFF;
  --color-surface-warm:   #FFF8F0;
  --font-heading:         'Baloo 2', system-ui, sans-serif;
  --font-body:            'Plus Jakarta Sans', system-ui, sans-serif;
}
─── END LEGACY ─────────────────────────────────────────────── */

:root {
  /* ── Backgrounds ─────────────────────────────────────────── */
  --color-bg-base:      #0B121E;   /* Midnight Navy — page background */
  --color-bg-panel:     #111827;   /* Sidebar, cards background */
  --color-bg-surface:   #1A2332;   /* Card faces, modals */
  --color-bg-elevated:  #1F2D3D;   /* Hover states, active items */

  /* ── Accent palette ──────────────────────────────────────── */
  --color-accent-yellow: #F5C518;  /* Electric Yellow — primary CTA, points */
  --color-accent-cyan:   #00D4FF;  /* Cyan glow — online, rank badges */
  --color-accent-purple: #9B59FF;  /* Purple — epic tier, special events */
  --color-accent-red:    #FF4757;  /* Alert red — danger, loss */
  --color-accent-green:  #2ECC71;  /* Win green — success */

  /* ── Text ────────────────────────────────────────────────── */
  --color-text-primary:   #F0F4F8; /* Near-white — headings */
  --color-text-secondary: #8899AA; /* Muted — labels, metadata */
  --color-text-muted:     #445566; /* Dim — disabled, timestamps */

  /* ── Borders ─────────────────────────────────────────────── */
  --color-border-subtle:  #1E2D3D;
  --color-border-glow:    rgba(0, 212, 255, 0.3);

  /* ── Rank metals ─────────────────────────────────────────── */
  --color-gold:   #F5C518;
  --color-silver: #8899AA;
  --color-bronze: #CD7F32;

  /* ── Game board — kept from Phase 1 ─────────────────────── */
  --color-sungka-board: #6B3A2A;
  --color-chess-light:  #F0D9B5;
  --color-chess-dark:   #B58863;

  /* ── Semantic aliases (mapped to new palette) ────────────── */
  --color-success:  var(--color-accent-green);
  --color-warning:  var(--color-accent-yellow);
  --color-danger:   var(--color-accent-red);
  --color-info:     var(--color-accent-cyan);

  /* ── Gradients ───────────────────────────────────────────── */
  --gradient-hero:    linear-gradient(135deg, #0B121E 0%, #1A2332 100%);
  --gradient-yellow:  linear-gradient(135deg, #F5C518, #FF9500);
  --gradient-sunset:  linear-gradient(135deg, #FF6B35, #FF1493);
  --gradient-deepsea: linear-gradient(135deg, #00D4FF, #0099CC);
  --gradient-purple:  linear-gradient(135deg, #9B59FF, #6C3FBD);
  --gradient-card:    linear-gradient(180deg, rgba(26,35,50,0.95), rgba(11,18,30,0.98));

  /* ── Typography ──────────────────────────────────────────── */
  --font-heading: 'Rajdhani', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'Orbitron', monospace;

  /* ── Type scale ──────────────────────────────────────────── */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-md:   1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.375rem;

  /* ── Leading ─────────────────────────────────────────────── */
  --leading-tight:  1.2;
  --leading-normal: 1.5;

  /* ── Font weights ────────────────────────────────────────── */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;

  /* ── Border radius ───────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Shadows (dark-tuned) ────────────────────────────────── */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.5);

  /* ── Motion ──────────────────────────────────────────────── */
  --duration-fast: 100ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);

  /* ── Touch targets ───────────────────────────────────────── */
  --touch-min:         44px;
  --touch-comfortable: 48px;

  /* ── Layout ──────────────────────────────────────────────── */
  --sidebar-width:   240px;
  --topbar-height:   56px;
  --bottomnav-height: 56px;
}