/**
 * iGBInsider — Design Tokens
 * Navy #0A1628 | Gold #C8A84B | Bright Gold #F5C842 | Editorial BG #F0F2F5
 */

/* Barlow — body */
@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/barlow-regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Barlow';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/barlow-italic.woff2') format('woff2');
}

@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/barlow-medium.woff2') format('woff2');
}

@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/barlow-semibold.woff2') format('woff2');
}

@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/barlow-bold.woff2') format('woff2');
}

@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('../fonts/barlow-extrabold.woff2') format('woff2');
}

/* Barlow Condensed — headings / UI */
@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/barlow-condensed-semibold.woff2') format('woff2');
}

@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/barlow-condensed-bold.woff2') format('woff2');
}

@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('../fonts/barlow-condensed-extrabold.woff2') format('woff2');
}

:root {
	/* Brand colors */
	--color-ink: #0a1628;
	--color-ink-2: #131f35;
	--color-ink-3: #1c2e4a;
	--color-ink-4: #243555;
	--color-gold: #c8a84b;
	--color-gold-bright: #f5c842;
	--color-gold-dark: #9e7e2a;
	--color-gold-light: #fbf0d0;
	--color-gold-bg: #fdf7e8;
	--color-paper: #f0f2f5;
	--color-white: #ffffff;

	/* Legacy aliases */
	--ink: var(--color-ink);
	--ink2: var(--color-ink-2);
	--ink3: var(--color-ink-3);
	--ink4: var(--color-ink-4);
	--gold: var(--color-gold);
	--gold-b: var(--color-gold-bright);
	--gold-d: var(--color-gold-dark);
	--gold-lt: var(--color-gold-light);
	--gold-bg: var(--color-gold-bg);
	--paper: var(--color-paper);
	--white: var(--color-white);
	--navy: var(--color-ink);
	--navy2: var(--color-ink-2);
	--navy3: var(--color-ink-3);

	/* Text */
	--color-text-primary: #0a0f1a;
	--color-text-secondary: #2d3748;
	--color-text-muted: #718096;
	--color-text-faint: #a0aec0;
	--t1: var(--color-text-primary);
	--t2: var(--color-text-secondary);
	--t3: var(--color-text-muted);
	--t4: var(--color-text-faint);

	/* Borders */
	--color-line: #e2e8f0;
	--color-line-strong: #cbd5e0;
	--line: var(--color-line);
	--line2: var(--color-line-strong);
	--border: var(--color-line);
	--border2: var(--color-line-strong);

	/* Category accents */
	--color-casino: #c8a84b;
	--color-sports: #2f855a;
	--color-lottery: #c53030;
	--color-esports: #6b46c1;
	--color-regulation: #2b6cb0;
	--color-business: #2d3748;
	--color-finance: #276749;
	--color-tech: #2c5282;
	--c-casino: var(--color-casino);
	--c-sports: var(--color-sports);
	--c-lottery: var(--color-lottery);
	--c-esports: var(--color-esports);
	--c-reg: var(--color-regulation);
	--c-biz: var(--color-business);
	--c-fin: var(--color-finance);
	--c-tech: var(--color-tech);

	/* Directory type accents */
	--color-type-operator: #1d4ed8;
	--color-type-payment: #16a34a;
	--color-type-affiliate: #7c3aed;
	--color-type-tech: #0891b2;
	--color-type-media: #dc2626;

	/* Status */
	--color-success: #276749;
	--color-danger: #c53030;
	--color-breaking: #ef4444;
	--green: var(--color-success);

	/* Typography */
	--font-body: 'Barlow', sans-serif;
	--font-heading: 'Barlow Condensed', sans-serif;
	--f-body: var(--font-body);
	--f-head: var(--font-heading);
	--f-display: var(--font-heading);

	--font-size-xs: 0.625rem;
	--font-size-sm: 0.6875rem;
	--font-size-base: 0.875rem;
	--font-size-md: 0.9375rem;
	--font-size-lg: 1rem;
	--font-size-xl: 1.125rem;
	--font-size-2xl: 1.25rem;
	--font-size-3xl: 1.5rem;
	--font-size-4xl: 1.625rem;
	--font-size-5xl: 2.125rem;
	--font-size-hero: 2.125rem;
	--font-size-display: 3.125rem;

	--line-height-tight: 1.08;
	--line-height-snug: 1.25;
	--line-height-base: 1.6;
	--line-height-relaxed: 1.65;

	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-extrabold: 800;

	--letter-spacing-tight: -0.02em;
	--letter-spacing-normal: 0;
	--letter-spacing-wide: 0.03em;
	--letter-spacing-wider: 0.05em;
	--letter-spacing-widest: 0.08em;
	--letter-spacing-caps: 0.12em;

	/* 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-7: 1.75rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;

	/* Radii */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 14px;
	--radius-xl: 20px;
	--radius-full: 9999px;
	--r: var(--radius-md);
	--r-sm: var(--radius-sm);
	--r-lg: var(--radius-lg);

	/* Shadows */
	--shadow-sm: 0 1px 3px rgba(10, 22, 40, 0.05);
	--shadow-md: 0 2px 12px rgba(10, 22, 40, 0.07);
	--shadow-lg: 0 8px 32px rgba(10, 22, 40, 0.14);
	--sh: var(--shadow-md);
	--sh-h: var(--shadow-lg);

	/* Layout */
	--layout-max: 1440px;
	--layout-gutter: 20px;
	--layout-gutter-lg: 24px;
	--layout-side-ad: 160px;
	--layout-main-col-padding: 12px;
	--layout-article-width: 720px;
	--layout-sidebar: 260px;
	--layout-sidebar-lg: 300px;
	--layout-sidebar-xl: 330px;
	--layout-hero-side: 330px;
	--layout-dir-search: 420px;

	/* Header / nav heights */
	--height-topbar: 32px;
	--height-header: 72px;
	--height-nav: 43px;
	--height-ticker: 34px;
	--height-filter-bar: 50px;
	--height-sticky-ad: 56px;
	--height-sticky-header: calc(var(--height-header) + var(--height-nav));

	/* Z-index scale */
	--z-dropdown: 500;
	--z-sticky-header: 400;
	--z-filter-bar: 200;
	--z-mobile-nav: 450;
	--z-sticky-ad: 600;
	--z-overlay: 700;

	/* Transitions */
	--transition-fast: 0.15s ease;
	--transition-base: 0.22s ease;
	--transition-slow: 0.45s ease;

	/* Focus ring */
	--focus-ring: 0 0 0 3px rgba(200, 168, 75, 0.35);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--transition-fast: 0.01ms;
		--transition-base: 0.01ms;
		--transition-slow: 0.01ms;
	}
}