/*
 * 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: "Print Federation" (AU market) — retro print editorial per the
 * approved reference: warm ecru page, cream panels, forest-green blocks,
 * coral-red accents/CTAs, near-black THIN BORDERS instead of shadows,
 * ZERO border radius. Fraunces (display serif) + Public Sans (body).
 * Fonts self-hosted (GDPR).
 */

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

@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('../fonts/fraunces-vf.woff2') format('woff2');
}

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

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

:root {
	/* Surfaces — light with a cool blue cast */
	--sn-bg:            #F4F4EC;   /* page background (warm ecru) */
	--sn-surface:       #FCF4E8;   /* cards / panels (cream) */
	--sn-surface-2:     #EDEDE3;   /* zebra rows, toplist rows, input bg */
	--sn-border:        #18181C;   /* thin near-black rules — the print look */

	/* Text */
	--sn-heading:       #18181C;
	--sn-text:          #33332F;
	--sn-text-muted:    #6E6E66;

	/* Brand */
	--sn-primary:       #EE4D29;   /* burnt orange-red — the ONLY action colour (Play Now CTAs) */
	--sn-primary-hover: #F05D4B;
	--sn-primary-dark:  #FCF4E8;   /* text ON coral buttons (cream) */
	--sn-accent:        #114B3A;   /* forest green — brand & informational: links, step numbers, table headers */
	--sn-pink:          #EE4D29;   /* heading accents, small highlights (coral on this skin) */
	--sn-gold:          #EE4D29;   /* star ratings */

	/* Indigo chrome (header/footer) — token names kept for compatibility */
	--sn-purple:        #114B3A;
	--sn-purple-2:      #183C30;   /* chrome gradient end (deep green) */
	--sn-purple-deep:   #18181C;   /* footer body (near-black) */
	--sn-purple-tint:   rgba(17, 75, 58, .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(238, 77, 41, .10);

	/* Typography */
	--sn-font:         'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--sn-font-display: 'Fraunces', Georgia, 'Times New Roman', 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:     0px;    /* straight print edges everywhere */
	--sn-radius-sm:  0px;
	--sn-radius-pill: 999px; /* pills/badges */
	--sn-shadow:     none;   /* the print look draws borders, not shadows */
	--sn-glow:       none;

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