/*
 * 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: "Harbour" (AU site #2, keyword `payid pokies`) — warm bone paper,
 * white cards, a deep petrol-teal chrome and ONE petrol action colour. The
 * brief is a payment-method keyword, so the page has to look like it knows
 * about banking, not about jackpots: calm, precise, warm-neutral, with the
 * teal doing all the work.
 *
 * IT IS NOT THE OTHER AUSTRALIAN SITE. `au-market` ("Print Federation") is
 * ecru + coral + forest green with NEAR-BLACK HAIRLINE BORDERS, zero radius
 * and no shadow, set in a serif. Two AU sites can share a SERP, so nothing
 * here may echo that: borders are warm and light, radius is back, shadows are
 * soft and warm, and the type is a technical grotesk. Coral #EE4D29 and forest
 * #114B3A must never appear on this branch.
 *
 * EVERY PAIR BELOW IS MEASURED, not eyeballed. The recurring bug across this
 * family of sites is a value tuned for one skin surviving into another where
 * it fails, so the ratios are recorded inline. Two rules fall out of it:
 *   1. --sn-text-muted must clear 4.5:1 against the DARKEST surface it ever
 *      lands on, which is --sn-surface-2, NOT the page.
 *   2. --sn-primary is a DARK colour here, so text on it is WHITE and hovers
 *      DARKEN. The bright aqua is a separate token and belongs on dark chrome
 *      only — at 1.8:1 on paper it is invisible as text.
 */

/* ---------- Fonts (self-hosted, latin subset) ---------- */
/*
 * Variable fonts, one file per family, 64KB total. Space Grotesk is the
 * display face: a technical grotesk with slightly mechanical forms, which is
 * the register a payments page wants and is nothing like the other AU site's
 * serif. IBM Plex Sans carries the body — it was designed for technical and
 * financial interfaces, and its numerals are unusually clear, which matters on
 * a site whose content is full of limits, fees and payout figures.
 */

@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('../fonts/space-grotesk-vf.woff2') format('woff2');
}

@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 100 700;
	font-display: swap;
	src: url('../fonts/ibm-plex-sans-vf.woff2') format('woff2');
}

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

:root {
	/* Surfaces — warm bone paper, WHITE cards. Warm neutrals keep the teal
	   from reading cold and clinical, which is the failure mode of every
	   fintech palette. */
	--sn-bg:            #F6F3EE;   /* page (warm bone) */
	--sn-surface:       #FFFFFF;   /* cards / panels */
	--sn-surface-2:     #E8E2D8;   /* toned rows, logo tiles, input bg */
	--sn-border:        #DDD5C8;   /* warm hairline — NOT near-black, see the header */

	/* Text. --sn-text-muted is measured against --sn-surface-2 (#E8E2D8), the
	   darkest surface it lands on: 4.90 there, 5.71 on paper. Do NOT lighten
	   it; #5E6864 was tried first and read 4.48 on surface-2. */
	--sn-heading:       #12262B;   /* deep ink with a teal cast — 14.18 on paper */
	--sn-text:          #35403F;   /* 9.70 on paper, 10.73 on white */
	--sn-text-muted:    #58625E;   /* see the note above before changing */

	/* Brand.
	   --sn-primary is DARK, so --sn-primary-dark (the token name is inherited
	   from the skins where the action colour was light; it means "the text that
	   sits ON primary") is WHITE here, at 5.97:1. */
	--sn-primary:       #0B6E78;   /* petrol teal — the ONLY action colour */
	--sn-primary-hover: #085861;   /* DARKENS on hover; never brighten on light */
	--sn-primary-dark:  #FFFFFF;   /* text ON petrol buttons */
	--sn-accent:        #0B6E78;   /* links, markers — 5.40 on paper, 5.97 on white */
	--sn-pink:          #0B6E78;   /* heading markers, small highlights */
	/* --sn-aqua is the "instant / cleared / active" highlight and lives on the
	   DARK CHROME, where it reads 8.75:1. As text on paper it is 1.79:1, i.e.
	   invisible — never use it on a light surface for anything meaningful. */
	--sn-aqua:          #3FD4E0;
	--sn-gold:          #8A6A1F;   /* star ratings — warm brass, 4.71 on white */

	/* Chrome (topbar/header/footer/hero) — token names kept for compatibility.
	   Deep petrol ink; aqua is the accent that lives up here. */
	--sn-purple:        #12262B;
	--sn-purple-2:      #0B3A42;   /* chrome gradient end (deeper petrol) */
	--sn-purple-deep:   #0A1A1E;   /* footer body */
	--sn-purple-tint:   rgba(11, 110, 120, .09);
	--sn-on-chrome:     #F6F3EE;   /* text/icons on the chrome — 14.18 */

	/* Semantic (callouts etc.) — tuned to read on warm bone.
	   NOTE --sn-danger is a deep brick, deliberately muted: bright red on a
	   PAYMENTS page reads as "declined", and this palette carries no warm red
	   anywhere else. */
	--sn-info:          #1C5C86;
	--sn-tip:           #1A6B4F;
	--sn-warning:       #8A5A0C;
	--sn-danger:        #9E2B2B;

	/* Tints for callout backgrounds */
	--sn-info-tint:     rgba(28, 92, 134, .08);
	--sn-tip-tint:      rgba(26, 107, 79, .09);
	--sn-warning-tint:  rgba(138, 90, 12, .10);
	--sn-danger-tint:   rgba(158, 43, 43, .07);
	--sn-primary-tint:  rgba(11, 110, 120, .10);

	/* Typography. Space Grotesk display, IBM Plex Sans body. */
	--sn-font:         'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	--sn-font-display: 'Space Grotesk', 'IBM Plex Sans', -apple-system, Helvetica, Arial, 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 floor — base.css scales it fluidly */
	--sn-fs-2xl: 2.5rem;   /* h1 floor — base.css scales it fluidly */
	--sn-lh-body: 1.7;
	--sn-lh-heading: 1.18;

	/* 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 — radius and soft warm shadow are BOTH back, which is the fastest
	   structural break from the other AU site (radius 0, shadow none, black
	   rules). Shadows are two-layer and tinted WARM: a neutral grey shadow on
	   bone paper reads as dirt. */
	--sn-radius:     6px;    /* cards, panels, images */
	--sn-radius-sm:  4px;    /* buttons, chips, small controls */
	--sn-radius-pill: 999px; /* pills/badges */
	--sn-shadow:     0 1px 2px rgba(18, 38, 43, .05), 0 8px 24px rgba(18, 38, 43, .07);
	--sn-glow:       0 6px 18px rgba(11, 110, 120, .26);

	/* Layout */
	--sn-container:  1160px;  /* outer container */
	--sn-content:    820px;   /* article measure — the image sizes in
	                             IMAGE-STYLE-AU2.md are derived from this */
}