/* Design tokens and base styles for FIZ6 Gaming */
:root {
	/* Typography */
	--font-sans: 'Syne', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-size-base: 16px;

	/* Navigation */
	--nav-height: 0px;
	--nav-z-index: 100;

	/* Core colors */
	--color-bg: #05060A;      /* page background */
    /* RGB helpers for alpha usage */
	--color-bg-rgb: 5,6,10;
	--color-white-rgb: 242,242,242;
	--color-muted-rgb: 189,189,189;
	--color-primary-rgb: 230,57,70;
	--color-bg-grad-start: #191A1F; /* gradient start */
	--color-bg-grad-end: #0F0E13;   /* gradient end */
	--color-topbar: #05060A; /* dark top bar from palette */
	--color-surface: #111111; /* header / surface */
	--color-surface-light: #F2F2F2; /* light surface from palette */
	--color-text: #f2f2f2;
	--color-muted: #bdbdbd;

	/* Brand */
	--color-primary: #00CCFF; /* accent / brand red */
	--color-accent: #002beb;  /* secondary accent */
	--color-black: #05060A;
	--color-white: #f2f2f2;

	/* Links */
	--color-link: var(--color-primary);

	/* Palette gradients (start -> end) from provided image */
	--grad-dark-start: #05060A;
	--grad-dark-end: #11141C;   

	--grad-slate-start: #D0E1F0;
	--grad-slate-end: #27252E;

	--grad-blue-start: #002BEB;
	--grad-blue-end: #00CCFF;

	/* Logo Gradient */
	--grad-new-start: #87878C;
	--grad-new-end: #E0EBF3;

	/* Special Gradients */
	--grad-red-start: #6B0814;
	--grad-red-end: #F01733;

	--grad-purple-start: #D71EF9;
	--grad-purple-end: #542CEA;

	--grad-yellow-start: #FFE300;
	--grad-yellow-end: #FF4D00;

	--grad-green-start: #BAFF00;
	--grad-green-end: #005200;

	--grad-pink-start: #FF7AAB;
	--grad-pink-end: #FF00FF;



	--grad-slate: linear-gradient(180deg, var(--grad-slate-start), var(--grad-slate-end));
	--grad-blue: linear-gradient(180deg, var(--grad-blue-start), var(--grad-blue-end));
	--grad-red: linear-gradient(180deg, var(--grad-red-start), var(--grad-red-end));
	--grad-purple: linear-gradient(180deg, var(--grad-purple-start), var(--grad-purple-end));
	--grad-yellow: linear-gradient(180deg, var(--grad-yellow-start), var(--grad-yellow-end));
	--grad-green: linear-gradient(180deg, var(--grad-green-start), var(--grad-green-end));
	--grad-pink: linear-gradient(180deg, var(--grad-pink-start), var(--grad-pink-end));
	--grad-dark: linear-gradient(90deg, var(--grad-dark-start), var(--grad-dark-end));
	--grad-new: linear-gradient(135deg, var(--grad-new-start), var(--grad-new-end));

	/* Layout Spacing System */
	--space-1: 0.25rem;    /* 4px */
	--space-2: 0.5rem;     /* 8px */
	--space-3: 1rem;       /* 16px */
	--space-4: 1.5rem;     /* 24px */
	--space-5: 2rem;       /* 32px */
	--space-6: 3rem;       /* 48px */
	--space-7: 4rem;       /* 64px */
	--space-8: 6rem;       /* 96px */
	--space-9: 8rem;       /* 128px */
	
	/* Component Specific Spacing */
	--space-xs: 0.125rem;  /* 2px */
	--space-sm: 0.75rem;   /* 12px */
	--space-md: 1.25rem;   /* 20px */
	--space-lg: 2.5rem;    /* 40px */
	--space-xl: 3.5rem;    /* 56px */
	
	/* Grid Gaps */
	--gap-1: var(--space-2);
	--gap-2: var(--space-3);
	--gap-3: var(--space-4);
	--gap-4: var(--space-5);
}

/* Base page */
body {
	font-family: var(--font-sans);
	background: var(--color-bg);
	color: var(--color-text);
	-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}