/* =========================================================================
   01 — DESIGN TOKENS  ·  Premium Arena Dark
   Site-wide neo-modern dark + gold + live-red palette.
   Defined on :root so every page inherits them.
   ========================================================================= */

:root {
	/* ---------- Surfaces (dark) ---------- */
	--s67-bg:            #070709;   /* page background (deep) */
	--s67-bg-elev-1:     #131319;   /* card / panel */
	--s67-bg-elev-2:     #1b1b24;   /* nested surface, hover */
	--s67-bg-elev-3:     #232330;   /* highlighted surface */
	--s67-bg-deep:       #07070a;   /* top/footer bars */
	--s67-bg-deepest:    #050507;   /* absolute footer */
	--s67-overlay:       rgba(10, 10, 13, 0.72);

	/* ---------- Gold scale (sampled from the SABong67 logo — metallic gold) ---------- */
	--s67-gold-cream:    #fff3c2;   /* brightest foil highlight */
	--s67-gold-50:       #fff3c2;
	--s67-gold-100:      #fbe293;
	--s67-gold-300:      #f1c233;   /* primary core (logo gold) */
	--s67-gold-400:      #e6b423;
	--s67-gold-500:      #d4a01f;   /* rich gold */
	--s67-gold-700:      #9c6e15;   /* bronze shadow */
	--s67-gold-glow:     rgba(241, 194, 51, 0.45);

	/* ---------- Text ---------- */
	--s67-text:          #ececf1;
	--s67-text-muted:    #a1a1ad;
	--s67-text-dim:      #6e6e7a;
	--s67-text-on-gold:  #1a1500;

	/* ---------- Borders ---------- */
	--s67-border:        rgba(255, 255, 255, 0.06);
	--s67-border-strong: rgba(255, 255, 255, 0.12);
	--s67-border-gold:   rgba(244, 196, 48, 0.32);

	/* ---------- Live / accent ---------- */
	--s67-live:          #ff3b3b;
	--s67-live-deep:     #e0241b;
	--s67-live-glow:     rgba(255, 59, 59, 0.55);

	/* ---------- Gradients ---------- */
	/* Metallic "gold foil" — bronze → core gold → bright gold → cream highlight */
	--s67-grad-gold:
		linear-gradient(135deg, #b07d1d 0%, #e8b929 34%, #f8d75a 62%, #fff1c0 100%);
	--s67-grad-gold-soft:
		linear-gradient(135deg, rgba(212, 160, 31, 0.18) 0%, rgba(241, 194, 51, 0.08) 100%);
	--s67-grad-bg-hero:
		radial-gradient(1200px 480px at 50% -10%, rgba(241, 194, 51, 0.16), transparent 60%),
		radial-gradient(800px 400px at 90% 20%, rgba(241, 194, 51, 0.06), transparent 60%),
		linear-gradient(180deg, #0d0d12 0%, #0a0a0d 100%);
	--s67-grad-card-hover:
		linear-gradient(180deg, rgba(244, 196, 48, 0.06) 0%, transparent 60%);

	/* ---------- Radius ---------- */
	--s67-radius-xs:     6px;
	--s67-radius-sm:     10px;
	--s67-radius-md:     14px;
	--s67-radius-lg:     20px;
	--s67-radius-pill:   999px;

	/* ---------- Spacing ---------- */
	--s67-space-1:       4px;
	--s67-space-2:       8px;
	--s67-space-3:       12px;
	--s67-space-4:       16px;
	--s67-space-5:       20px;
	--s67-space-6:       24px;
	--s67-space-8:       32px;
	--s67-space-10:      40px;
	--s67-space-12:      48px;
	--s67-space-16:      64px;

	/* ---------- Shadows ---------- */
	--s67-shadow-sm:
		0 1px 2px rgba(0, 0, 0, 0.45),
		inset 0 1px 0 rgba(255, 255, 255, 0.03);
	--s67-shadow-md:
		0 8px 24px rgba(0, 0, 0, 0.45),
		0 2px 4px rgba(0, 0, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
	--s67-shadow-lg:
		0 20px 48px rgba(0, 0, 0, 0.55),
		0 4px 8px rgba(0, 0, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
	--s67-shadow-gold-glow:
		0 0 0 1px var(--s67-border-gold),
		0 10px 30px -10px var(--s67-gold-glow);

	/* ---------- Motion ---------- */
	--s67-ease:          cubic-bezier(0.2, 0.7, 0.2, 1);
	--s67-dur-fast:      140ms;
	--s67-dur-base:      220ms;
	--s67-dur-slow:      360ms;
}