/*
 * 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: "Blue Ribbon" (US market) — bright modern review-site look per
 * the approved reference: white cards floating on a pale blue page, one
 * royal-blue action colour, deep indigo headings and chrome, amber only for
 * ratings. Soft blue shadows and rounded corners (the opposite of the AU
 * print skin). Plus Jakarta Sans (display) + Figtree (body), self-hosted.
 */

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

@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('../fonts/plus-jakarta-sans-vf.woff2') format('woff2');
}

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

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

:root {
	/* Surfaces — pale blue page, WHITE cards (inverse of the AU skin) */
	--sn-bg:            #F5F7FE;   /* page background (pale blue) */
	--sn-surface:       #FFFFFF;   /* cards / panels (white) */
	--sn-surface-2:     #EDF0FE;   /* zebra rows, tinted bands, input bg */
	--sn-border:        #DDE4F6;   /* soft blue hairline — no black rules here */

	/* Text */
	--sn-heading:       #262678;   /* deep indigo (measured on the reference) */
	--sn-text:          #333333;
	--sn-text-muted:    #6B7192;

	/* Brand */
	--sn-primary:       #286BEF;   /* royal blue — the ONLY action colour (CTAs) */
	--sn-primary-hover: #0155D9;
	--sn-primary-dark:  #FFFFFF;   /* text ON blue buttons */
	--sn-accent:        #262678;   /* deep indigo — links, step numbers, table headers */
	--sn-pink:          #286BEF;   /* heading markers, small highlights */
	--sn-gold:          #FFC847;   /* star ratings (measured) */

	/* Chrome (topbar/footer) — token names kept for compatibility */
	--sn-purple:        #262678;
	--sn-purple-2:      #1E1E63;   /* chrome gradient end */
	--sn-purple-deep:   #1E1E63;   /* footer body (deep indigo) */
	--sn-purple-tint:   rgba(40, 107, 239, .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(40, 107, 239, .10);

	/* Typography */
	--sn-font:         'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--sn-font-display: 'Plus Jakarta Sans', 'Figtree', -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 — rounded and soft again (the AU print skin was 0/none) */
	--sn-radius:     10px;   /* cards, panels, images */
	--sn-radius-sm:  6px;    /* buttons, chips, small controls */
	--sn-radius-pill: 999px; /* pills/badges */
	/* Two layers: a tight contact shadow plus a wide soft one. A single blur
	   reads flat and synthetic at card sizes. */
	--sn-shadow:     0 1px 2px rgba(38, 38, 120, .06), 0 10px 28px rgba(38, 38, 120, .07);
	--sn-glow:       0 8px 22px rgba(40, 107, 239, .28);

	/* Curved section edge — the reference's signature soft arc. Used by the
	   hero bottom and the cta-banner (see base.css .x6f8e9376). */
	--sn-arc: 0 0 50% 50% / 0 0 40px 40px;

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