/*
 * Design tokens — single source of truth for all blocks and templates.
 * Edit ONLY via team agreement (see CLAUDE.md §4 and §12 Decisions log).
 *
 * Direction: "Candy Court" (light) — clean white/light-gray layout, purple
 * brand chrome (header/footer), pink heading accents, lime-green CTAs.
 * Modeled on the approved NL_SEO_Preview reference. Fonts self-hosted (GDPR).
 */

/* ---------- Fonts (self-hosted, latin subset) ---------- */

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

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

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

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

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

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

/* ---------- Tokens ---------- */

:root {
	/* Surfaces — light and airy */
	--sn-bg:            #F6F6F9;   /* page background */
	--sn-surface:       #FFFFFF;   /* cards / panels */
	--sn-surface-2:     #F0F0F4;   /* zebra rows, toplist rows, input bg */
	--sn-border:        #E4E4EC;

	/* Text */
	--sn-heading:       #201B33;
	--sn-text:          #3A3550;
	--sn-text-muted:    #7C7794;

	/* Brand */
	--sn-primary:       #A5CF12;   /* lime — the ONLY action colour (Play Now CTAs) */
	--sn-primary-hover: #B8E322;
	--sn-primary-dark:  #1E2A00;   /* text ON lime buttons */
	--sn-accent:        #7B2FBE;   /* purple — brand & informational: links, step numbers, table headers */
	--sn-pink:          #ED1E79;   /* heading accents, small highlights */
	--sn-gold:          #F5A80C;   /* star ratings */

	/* Purple chrome (header/footer) */
	--sn-purple:        #6A2BD9;
	--sn-purple-deep:   #2A1852;   /* footer body */
	--sn-purple-tint:   rgba(123, 47, 190, .08);

	/* Semantic (callouts etc.) — darkened for light surfaces */
	--sn-info:          #0284C7;
	--sn-tip:           #16A34A;
	--sn-warning:       #D97706;
	--sn-danger:        #DC2626;

	/* Tints for callout backgrounds (soft pastels on white) */
	--sn-info-tint:     rgba(2, 132, 199, .08);
	--sn-tip-tint:      rgba(22, 163, 74, .08);
	--sn-warning-tint:  rgba(217, 119, 6, .10);
	--sn-danger-tint:   rgba(220, 38, 38, .07);
	--sn-primary-tint:  rgba(165, 207, 18, .14);

	/* Typography */
	--sn-font:         'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--sn-font-display: 'Poppins', 'Barlow', -apple-system, sans-serif;
	--sn-fs-xs: .8125rem;  /* 13px meta */
	--sn-fs-sm: .9375rem;  /* 15px small */
	--sn-fs-md: 1.0625rem; /* 17px body */
	--sn-fs-lg: 1.375rem;  /* h3 */
	--sn-fs-xl: 1.875rem;  /* h2 */
	--sn-fs-2xl: 2.5rem;   /* h1 */
	--sn-lh-body: 1.7;
	--sn-lh-heading: 1.25;

	/* Spacing scale (multiples of 4) */
	--sn-sp-1: .25rem;  --sn-sp-2: .5rem;  --sn-sp-3: .75rem; --sn-sp-4: 1rem;
	--sn-sp-6: 1.5rem;  --sn-sp-8: 2rem;   --sn-sp-12: 3rem;  --sn-sp-16: 4rem;

	/* Shape */
	--sn-radius:     12px;   /* cards, panels, images */
	--sn-radius-sm:  8px;    /* buttons, inputs, chips */
	--sn-radius-pill: 999px; /* pills/badges */
	--sn-shadow:     0 10px 30px rgba(32, 27, 51, .10);
	--sn-glow:       0 6px 18px rgba(165, 207, 18, .40);

	/* Layout */
	--sn-container:  1160px;  /* outer container */
	--sn-content:    820px;   /* article/content column */
}