/*** iGaming Review – designtokens ***/

/*
 * En sanning för färg, typografi, avstånd, radier, skuggor och rörelse.
 * Temat och news-filter läser härifrån via var(--igr-*).
 *
 * Tre lager:
 * 1. Primitiver – råa värden i skalor (--igr-blue-900, --igr-gray-500).
 * 2. Roller – vad värdet används till (--igr-text-muted, --igr-border).
 * 3. Komponenter – bara där en komponent behöver ett eget namn (--igr-panel).
 *
 * Komponent-CSS ska använda roller, inte primitiver, så att en ändring av
 * t.ex. dämpad text slår igenom överallt på en gång.
 *
 * Varumärkesfärgerna läser Divis inbyggda globala färger först, så att en
 * ändring i Divi > Globala färger följer med. Divis slumpade id:n
 * (gcid-h0uwxzcbly och liknande) används inte, eftersom de inte går att läsa.
 */

:root {

	/*** Primitiver: blå (Torea Bay, samma skala som i Divi) ***/
	--igr-blue-50: #edf2ff;
	--igr-blue-100: #dee8ff;
	--igr-blue-300: #a1b7ff;
	--igr-blue-500: #5c6af8;
	--igr-blue-700: #3231d1;
	--igr-blue-900: var(--gcid-primary-color, #2e3192);
	--igr-blue-950: #232780;
	--igr-navy: #0e1a3c;

	/*** Primitiver: indigo, intervjuslider och sidgrid ***/
	--igr-indigo-300: #a5b4fc;
	--igr-indigo-600: #4338ca;
	--igr-indigo-700: #3730a3;

	/*** Primitiver: röd ***/
	--igr-red-50: #fcebea;
	/*** 4,26:1 mot vitt, räcker bara för stor text och grafik: H1 och de korta linjerna ***/
	--igr-red-500: var(--gcid-secondary-color, #e6362c);
	/*** Tre steg mörkare än 500, klarar AA (4,50:1) för liten text mot vitt ***/
	--igr-red-600: #df342b;
	--igr-red-700: #c42d25;
	--igr-red-800: #a82620;

	/*** Primitiver: gråskala. 500 är den ljusaste tonen som klarar AA för text mot vitt (4,83:1) ***/
	--igr-gray-0: #ffffff;
	--igr-gray-25: #f9fbfe;
	--igr-gray-50: #f8fafc;
	--igr-gray-100: #f1f5f9;
	--igr-gray-200: #e5e7eb;
	--igr-gray-300: #d1d5db;
	--igr-gray-400: #9ca3af;
	--igr-gray-500: #6b7280;
	--igr-gray-600: #4b5563;
	--igr-gray-700: #374151;
	--igr-gray-900: #1a202c;
	--igr-gray-950: var(--gcid-body-color, #121212);

	/*** Roller: text ***/
	--igr-text: var(--igr-gray-950);
	--igr-text-strong: var(--igr-gray-900);
	--igr-text-secondary: var(--igr-gray-700);
	--igr-text-muted: var(--igr-gray-500);
	--igr-text-on-dark: var(--igr-gray-0);
	--igr-text-brand: var(--igr-blue-900);
	--igr-text-accent: var(--igr-red-600);
	/*** Platshållartext räknas som text och behöver 4,5:1, gray-500 ger 4,83:1 ***/
	--igr-text-placeholder: var(--igr-gray-500);

	/*** Roller: länkar ***/
	--igr-link: var(--gcid-link-color, #2e3192);
	--igr-link-hover: var(--igr-red-600);

	/*** Roller: ytor ***/
	--igr-surface: var(--igr-gray-0);
	--igr-surface-tint: var(--igr-gray-25);
	--igr-surface-muted: var(--igr-gray-50);
	--igr-surface-hover: var(--igr-gray-100);
	--igr-surface-brand: var(--igr-blue-50);

	/*** Roller: kanter ***/
	--igr-border: var(--igr-gray-200);
	--igr-border-subtle: var(--igr-gray-100);
	--igr-border-brand: rgba(46, 49, 146, 0.1);
	/*** Formulärfält kräver 3:1 mot bakgrunden (WCAG 1.4.11). Dagens #bababa ger 1,94:1 ***/
	--igr-border-input: #8b919a;

	/*** Roller: tillstånd ***/
	--igr-focus: var(--igr-blue-900);
	--igr-focus-on-dark: var(--igr-gray-0);
	/*** En enda markeringsblå. Vit text ger 10,66:1, intervallets blå text mot blue-100 ger 8,67:1 ***/
	--igr-selected: var(--igr-blue-900);
	--igr-selected-text: var(--igr-gray-0);
	--igr-selected-range: var(--igr-blue-100);
	--igr-selected-range-text: var(--igr-blue-900);

	/*** Inaktiva kontroller, som sliderpunkter. Fyllningen ensam ger 2,54:1, ramen bär kontrasten med 4,83:1 ***/
	--igr-control-off: var(--igr-gray-400);
	--igr-control-border: var(--igr-gray-500);

	/*** Fel och destruktiva åtgärder. Vit text på danger ger 5,60:1, danger på danger-bg 4,86:1 ***/
	--igr-danger: var(--igr-red-700);
	--igr-danger-hover: var(--igr-red-800);
	--igr-danger-bg: var(--igr-red-50);

	/*** Komponent: mörk panel (intervjuslider, toppartikel) ***/
	--igr-panel: var(--igr-navy);
	--igr-panel-text: var(--igr-gray-0);
	--igr-panel-dim: #c9d2e8;
	--igr-panel-accent: var(--igr-indigo-300);
	--igr-panel-media: #111319;

	/*** Komponent: kategorier, ikonfärg mot badgebakgrund, alla minst 3:1 ***/
	--igr-cat-business: #1d4ed8;
	--igr-cat-business-bg: #dde4f9;
	--igr-cat-legal: #b45309;
	--igr-cat-legal-bg: #f4e5da;
	--igr-cat-marketing: #c2410c;
	--igr-cat-marketing-bg: #fce6db;
	--igr-cat-casino: #059669;
	--igr-cat-casino-bg: #daefe9;
	--igr-cat-prediction: #c026d3;
	--igr-cat-prediction-bg: #f6def8;
	--igr-cat-regulation: #7c3aed;
	--igr-cat-regulation-bg: #ebe1fc;
	--igr-cat-data: #0d9488;
	--igr-cat-data-bg: #dbefed;
	--igr-cat-responsible: #db2777;
	--igr-cat-responsible-bg: #fadfeb;
	--igr-cat-sports: #0284c7;
	--igr-cat-sports-bg: #d9edf7;
	--igr-cat-tech: #475569;
	--igr-cat-tech-bg: #e3e6e9;

	/*** Typografi: familjer. Poppins är uppladdat som separata familjer per vikt ***/
	--igr-font-body: "Poppins Regular", "Poppins", Helvetica, Arial, Lucida, sans-serif;
	--igr-font-semibold: "Poppins Semibold", "Poppins", Helvetica, Arial, Lucida, sans-serif;
	--igr-font-bold: "Poppins Bold", "Poppins", Helvetica, Arial, Lucida, sans-serif;
	--igr-font-heading: var(--et_global_heading_font, "Playfair Display Variable"), Georgia, "Times New Roman", serif;

	/*** Typografi: skala. Fasta steg för gränssnitt, clamp() för rubriker och brödtext ***/
	--igr-text-2xs: 0.7rem;
	--igr-text-xs: 0.75rem;
	--igr-text-sm: 0.875rem;
	--igr-text-md: 1rem;
	--igr-text-lg: 1.1rem;
	--igr-text-body: clamp(0.9rem, 0.7rem + 0.22vw, 1.88rem);
	--igr-text-h1: clamp(1.6rem, 0.05rem + 4vw, 3.25rem);
	--igr-text-h2: clamp(1.4rem, 0.42rem + 2.44vw, 2.38rem);
	--igr-text-h3: clamp(1.25rem, 1.09rem + 0.67vw, 1.63rem);
	--igr-text-section: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);

	--igr-weight-regular: 400;
	--igr-weight-medium: 500;
	--igr-weight-semibold: 600;
	--igr-weight-bold: 700;

	--igr-leading-tight: 1.12;
	--igr-leading-heading: 1.3;
	--igr-leading-ui: 1.4;
	--igr-leading-body: 1.55;

	/*** Versaletiketter: samma 0,75rem/600 återkommer i tabellhuvud, metarader och referenser ***/
	--igr-tracking-sm: 0.06em;
	--igr-tracking-md: 0.08em;
	--igr-tracking-lg: 0.12em;

	/*** Avstånd, 4px-steg ***/
	--igr-space-1: 0.25rem;
	--igr-space-2: 0.5rem;
	--igr-space-3: 0.75rem;
	--igr-space-4: 1rem;
	--igr-space-5: 1.25rem;
	--igr-space-6: 1.5rem;
	--igr-space-8: 2rem;
	--igr-space-10: 2.5rem;
	--igr-space-12: 3rem;

	/*** Radier. xl motsvarar Divis variabel Border XL ***/
	--igr-radius-xs: 2px;
	--igr-radius-sm: 4px;
	--igr-radius-md: 6px;
	--igr-radius-lg: 8px;
	--igr-radius-xl: var(--gvid-vvvmm20228, 16px);
	--igr-radius-full: 50%;

	/*** Skuggor, från platt till svävande ***/
	--igr-shadow-card: 0 0 12px rgba(46, 49, 146, 0.04);
	--igr-shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.1);
	--igr-shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.12);
	--igr-shadow-floating: 0 6px 20px rgba(15, 23, 42, 0.18);

	/*** Fokusring ***/
	--igr-focus-width: 2px;
	--igr-focus-offset: 2px;

	/*** Rörelse ***/
	--igr-duration-fast: 0.15s;
	--igr-duration-base: 0.2s;
	--igr-duration-slow: 0.4s;
	--igr-ease: ease;
}

/*** Utan rörelse ska övergångar vara omedelbara, oavsett vilken komponent som läser tokens ***/
@media (prefers-reduced-motion: reduce) {
	:root {
		--igr-duration-fast: 0s;
		--igr-duration-base: 0s;
		--igr-duration-slow: 0s;
	}
}