/*
 * 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: "Deep Signal" (DE market) — clean white/cool-gray layout, deep
 * indigo brand chrome (header/footer) with diagonal section cuts, cyan CTAs,
 * cyan heading accents. Modeled on the iffiliate reference screenshot.
 * Fonts self-hosted (GDPR).
 */

/* ---------- Fonts (self-hosted, latin subset) ---------- */
/* Variable fonts: one file per family covers every weight we use. */

@font-face {
	font-family: 'Sora';
	font-style: normal;
	font-weight: 100 800;
	font-display: swap;
	src: url('../fonts/sora-vf.woff2') format('woff2');
}

@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url('../fonts/source-sans-3-vf.woff2') format('woff2');
}

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

:root {
	/* Surfaces — light with a cool blue cast */
	--sn-bg:            #F4F6FB;   /* page background */
	--sn-surface:       #FFFFFF;   /* cards / panels */
	--sn-surface-2:     #EDF1F8;   /* zebra rows, toplist rows, input bg */
	--sn-border:        #E1E6F2;

	/* Text */
	--sn-heading:       #1B1F4B;
	--sn-text:          #3C4160;
	--sn-text-muted:    #7B819F;

	/* Brand */
	--sn-primary:       #00A3D4;   /* cyan — the ONLY action colour (Play Now CTAs) */
	--sn-primary-hover: #14B8EA;
	--sn-primary-dark:  #FFFFFF;   /* text ON cyan buttons */
	--sn-accent:        #3A44B8;   /* indigo — brand & informational: links, step numbers, table headers */
	--sn-pink:          #00B7E8;   /* heading accents, small highlights (cyan on this skin) */
	--sn-gold:          #F5A80C;   /* star ratings */

	/* Indigo chrome (header/footer) — token names kept for compatibility */
	--sn-purple:        #2B2E83;
	--sn-purple-2:      #3A44B8;   /* chrome gradient end */
	--sn-purple-deep:   #151A4E;   /* footer body */
	--sn-purple-tint:   rgba(58, 68, 184, .08);
	--sn-on-chrome:     #FFFFFF;   /* text/icons on the indigo chrome */

	/* 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(0, 163, 212, .10);

	/* Typography */
	--sn-font:         'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--sn-font-display: 'Sora', 'Source Sans 3', -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 — squarer than the NL skin (reference uses tight corners) */
	--sn-radius:     8px;    /* cards, panels, images */
	--sn-radius-sm:  5px;    /* buttons, inputs, chips */
	--sn-radius-pill: 999px; /* pills/badges */
	--sn-shadow:     0 12px 30px rgba(27, 31, 75, .08);
	--sn-glow:       0 6px 18px rgba(0, 163, 212, .35);

	/* Diagonal section cuts (hero bottom / footer top) */
	--sn-cut:        2.25rem;

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