/* ═══════════════════════════════════════════════════
   NETRIGO GAME STUDIOS — Design Tokens v3.0
   AAA Studio Edition
═══════════════════════════════════════════════════ */
:root {
  /* ── Background ── */
  --bg:              #060810;
  --bg-color:        #060810;
  --surface-1:       #0c0e18;
  --surface-2:       #111420;
  --surface-color:   #0c0e18;

  /* ── Text ── */
  --text-color:      #e2e4ee;
  --muted:           #636b85;
  --muted-bright:    #8892aa;

  /* ── Brand Colors ── */
  --primary:         #c8a96e;
  --primary-hover:   #dbbf84;
  --primary-dim:     rgba(200, 169, 110, 0.12);
  --primary-glow:    rgba(200, 169, 110, 0.20);

  --danger:          #8b1a1a;
  --danger-hover:    #a52020;
  --danger-dim:      rgba(139, 26, 26, 0.14);
  --danger-glow:     rgba(139, 26, 26, 0.25);

  --accent:          #5c7cac;
  --accent-dim:      rgba(92, 124, 172, 0.12);

  --success:         #2d7a4e;

  /* ── Borders & Glass ── */
  --border-color:    rgba(255, 255, 255, 0.07);
  --border-bright:   rgba(255, 255, 255, 0.14);
  --border-primary:  rgba(200, 169, 110, 0.25);
  --border-danger:   rgba(139, 26, 26, 0.30);

  --glass:           rgba(12, 14, 24, 0.70);
  --glass-strong:    rgba(8, 10, 18, 0.88);
  --glass-light:     rgba(255, 255, 255, 0.035);

  /* ── Typography ── */
  --font-display:  "Bebas Neue", "Impact", "Arial Black", sans-serif;
  --font-sub:      "Cinzel", "Georgia", serif;
  --font-main:     "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:     "JetBrains Mono", "Fira Code", "SFMono-Regular", Consolas, monospace;

  /* ── Spacing ── */
  --section-gap:    6rem;
  --container-max:  1240px;
  --container-pad:  2rem;

  /* ── Transitions ── */
  --transition-fast:  0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-speed: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:  0.45s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Shadows ── */
  --shadow-sm:   0 2px 8px  rgba(0,0,0,0.30);
  --shadow-md:   0 8px 32px rgba(0,0,0,0.45);
  --shadow-lg:   0 20px 60px rgba(0,0,0,0.55);
  --shadow-gold: 0 8px 32px rgba(200,169,110,0.18);
  --shadow-red:  0 8px 32px rgba(139,26,26,0.22);

  /* ── Border Radius ── */
  --radius-sm:   4px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
}