/*
 * 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: "Lav" (Swedish market) — warm editorial. A bone-olive paper, ink
 * line work, hairline rules instead of cards, and colour used sparingly:
 * oxblood is the single action colour, deep moss the informational one.
 * Newsreader (variable serif, display) + Karla (body). Fonts self-hosted.
 */

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

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

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

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

:root {
	/* Surfaces — warm paper, not white. Panels are barely lighter than the
	   page: in this direction separation comes from RULES, not from fills. */
	--sn-bg:            #EAE9E0;   /* page (warm bone-olive) */
	--sn-surface:       #F7F6F1;   /* panels */
	--sn-surface-2:     #DEDDD1;   /* toned rows, input bg, logo tiles */
	--sn-border:        #C9C8B8;   /* hairline */

	/* Text. NOTE on --sn-text-muted: it must clear 4.5:1 against the DARKEST
	   surface it ever sits on, which is --sn-surface-2 (#DEDDD1) inside the
	   calculator's results panel — not against the page. #6E6F60 read 3.74
	   there and failed AA; #5E5F50 reads 4.76. Do not lighten it back. */
	--sn-heading:       #23241D;   /* ink */
	--sn-text:          #43443A;
	--sn-text-muted:    #5E5F50;   /* darkened for WCAG AA — see the note above */

	/* Brand */
	--sn-primary:       #8A2E3B;   /* oxblood — the ONLY action colour */
	--sn-primary-hover: #6E2430;
	--sn-primary-dark:  #F7F6F1;   /* text ON oxblood */
	--sn-accent:        #3E5C50;   /* deep moss — links, step numbers, markers */
	--sn-pink:          #8A2E3B;   /* heading markers */
	--sn-gold:          #8A6B2E;   /* star ratings (aged brass, not yellow) */

	/* Chrome (topbar/footer) — token names kept for compatibility */
	--sn-purple:        #23241D;
	--sn-purple-2:      #2E2F26;
	--sn-purple-deep:   #23241D;   /* footer body (ink) */
	--sn-purple-tint:   rgba(62, 92, 80, .10);
	--sn-on-chrome:     #F2F0E6;   /* text/icons on the ink chrome */

	/* Semantic (callouts etc.) — muted to sit on paper */
	--sn-info:          #3E5C50;
	--sn-tip:           #4A6B3D;
	--sn-warning:       #9A6B1F;
	--sn-danger:        #8A2E3B;

	/* Tints for callout backgrounds */
	--sn-info-tint:     rgba(62, 92, 80, .09);
	--sn-tip-tint:      rgba(74, 107, 61, .09);
	--sn-warning-tint:  rgba(154, 107, 31, .10);
	--sn-danger-tint:   rgba(138, 46, 59, .08);
	--sn-primary-tint:  rgba(138, 46, 59, .08);

	/* Typography */
	--sn-font:         'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--sn-font-display: 'Newsreader', 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.75;
	--sn-lh-heading: 1.12;

	/* 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 — square edges and NO shadows. Rules and whitespace do the work;
	   nothing in this direction floats. */
	--sn-radius:     0px;
	--sn-radius-sm:  0px;
	--sn-radius-pill: 999px; /* the 18+ chip and compliance chips only */
	--sn-shadow:     none;
	--sn-glow:       none;

	/* Layout */
	--sn-container:  1040px;  /* outer container — tighter than the US skin */
	--sn-content:    720px;   /* article measure, sized for the serif */
}