/*
 * Roots 'n' Fruits — shared design tokens.
 *
 * The single foundation reused by every page (offer, home, portal). A restyle
 * is a change here, never a logic edit. Sage palette + type system from the
 * build spec, plus system font stacks (serif headings / sans body).
 *
 * Mockup-only variables (--border-radius-lg, --color-background-secondary,
 * --font-sans, --font-serif) are resolved to real values here.
 */

:root {
	/* BEGIN ROLLBACK 2026-09-08 recolour: cream / sage / brown palette. */
	/*
	 * New palette, defined in ONE place. Every retarget below points at these,
	 * so a future change is a value edit here and nowhere else.
	 *
	 * COLOUR ONLY. No font, size, weight, spacing or layout token is touched by
	 * this block or by anything it feeds.
	 */
	--rnf-cream:       #f5f0e8; /* page background, replaces the tan */
	--rnf-brown:       #3b2f24; /* primary text, replaces near-black */
	--rnf-brown-soft:  #6b5d4f; /* secondary / muted text */
	--rnf-brown-deep:  #2d2419; /* text and links on the sage footer */
	--rnf-sage:        #6a8048; /* Brand retune 2026-09-15 (local only): was #7d9b76. This IS the Canva anchor green. */
	--rnf-sage-strong: #414e2c; /* Brand retune 2026-09-15 (local only): was #6f8a63 (3.42:1 with --on-pine, failed AA). Anchor hue+sat, L24% -> 7.99:1. */
	/* END ROLLBACK 2026-09-08 recolour */

	/* BEGIN ROLLBACK 2026-09-08 white/black: white background, black text. */
	/*
	 * Added BESIDE the cream/sage/brown block above, which is deliberately left
	 * intact. --rnf-cream in particular MUST keep its value: the footer's seven
	 * text rules in offer.css read it DIRECTLY (offer.css:107,134,147,155,162,
	 * 170,189), never through --paper, so the footer is structurally isolated
	 * from this change and no footer rule is edited.
	 *
	 * COLOUR ONLY. No font, size, weight, spacing or layout token is touched.
	 */
	--rnf-white:      #ffffff; /* page/body background */
	--rnf-ink:        #111111; /* primary text: body, headings, nav, links, wordmark */
	--rnf-ink-soft:   #444444; /* secondary / muted text */
	/* END ROLLBACK 2026-09-08 white/black */

	/* BEGIN ROLLBACK 2026-09-08 footer green: darker gray-green footer surface. */
	/*
	 * Consumed by ONE rule: the footer surface at offer.css:104. --rnf-sage keeps
	 * its value because tokens.css:50 still feeds --sage to ~21 accent uses
	 * elsewhere; only the footer moves.
	 *
	 * COLOUR ONLY. No font, size, weight, spacing or layout token is touched.
	 */
	--rnf-footer:     #414e2c; /* Brand retune 2026-09-15 (local only): was #60774b. Anchor hue+sat, L24%. */
	/* END ROLLBACK 2026-09-08 footer green */

	/* Sage palette */
	/* ROLLBACK 2026-09-08 recolour, was: --paper:  #F4EFE3; */
	/* ROLLBACK 2026-09-08 white/black, was: --paper:  var(--rnf-cream); */
	/* ROLLBACK 2026-09-08 cream back, was: --paper:  var(--rnf-white); */
	--paper:  var(--rnf-cream);
	--paper2: #FBF8F0;
	/* ROLLBACK 2026-09-08 recolour, was: --sage:   #8C9A7B; */
	--sage:   var(--rnf-sage);
	--sage2:  #dbe2d0; /* Brand retune 2026-09-15: was #DCE2D0 (hue 80->83.6, sat+lightness kept). */
	--sage3:  #c6d1b6; /* Brand retune 2026-09-15: was #C7D1B6 (hue 82->83.6, sat+lightness kept). */
	/*
	 * ROLLBACK 2026-09-08 recolour, was: --pine:   #3C4A38;
	 * --pine has 71 call sites and they are NOT one colour semantically: most are
	 * heading/link/border text on cream, which becomes brown here. The handful
	 * that used it as a SURFACE behind light text are retargeted individually in
	 * offer.css (the footer, and .rnf-btn) so they get sage instead.
	 */
	/* ROLLBACK 2026-09-08 white/black, was: --pine:   var(--rnf-brown); */
	--pine:   var(--rnf-ink);
	/* ROLLBACK 2026-09-08 recolour, was: --ink:    #2C2E28; */
	/* ROLLBACK 2026-09-08 white/black, was: --ink:    var(--rnf-brown); */
	--ink:    var(--rnf-ink);
	/* ROLLBACK 2026-09-08 recolour, was: --inks:   #5C6353; */
	/* ROLLBACK 2026-09-08 white/black, was: --inks:   var(--rnf-brown-soft); */
	--inks:   var(--rnf-ink-soft);
	--clay:   #835e01; /* Brand retune 2026-09-15: was #9C5A30. Orange anchor hue+sat, L26%. */
	--kick:   #4e5f35; /* Brand retune 2026-09-15: was #4F5E3E. Green anchor hue+sat, L29%. */
	--line:   #E0D9C8;

	/* On-pine text (buttons, badges) */
	--on-pine: #F6F2E8;

	/*
	 * Type system — web fonts (2026-08-08). Loaded by the 'rnf-fonts-global'
	 * handle in functions.php: Montserrat 600;700, Open Sans 400;500;600,
	 * Alex Brush 400.
	 *
	 * was: --font-serif: Georgia, "Iowan Old Style", "Times New Roman", "Apple Garamond", "Liberation Serif", serif;
	 * was: --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", sans-serif;
	 *
	 * --font-system holds the old --font-sans stack verbatim and exists so the
	 * legacy aliases at the bottom of this block cannot form a custom-property
	 * cycle. Writing --font-body: "Open Sans", var(--font-sans) while also
	 * writing --font-sans: var(--font-body) is circular, and CSS resolves a
	 * cyclic custom property to the guaranteed-invalid value — which would take
	 * out every font-family on the site at once. Do not point the new tokens at
	 * --font-sans.
	 */
	--font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", sans-serif;

	/* ROLLBACK 2026-09-08 fraunces, was: --font-display: "Montserrat", var(--font-system); */
	/* ROLLBACK 2026-09-08 all-inter, was: --font-display: 'Fraunces', Georgia, serif; */
	--font-display: 'Inter', system-ui, sans-serif;
	/* ROLLBACK 2026-09-08 fraunces, was: --font-body:    "Open Sans", var(--font-system); */
	--font-body:    'Inter', system-ui, sans-serif;
	/* ROLLBACK 2026-09-08 fraunces, was: --font-script:  "Alex Brush", cursive; */
	/* The wordmark moves to Fraunces; Alex Brush is retired from the enqueue. */
	/* ROLLBACK 2026-09-08 all-inter, was: --font-script:  'Fraunces', Georgia, serif; */
	/* The footer wordmark is Inter too now; nothing on the site is Fraunces. */
	--font-script:  'Inter', system-ui, sans-serif;

	/* BEGIN ROLLBACK 2026-09-08 cardo: Cardo heading face. */
	/*
	 * Loaded by the rnf-fonts-global enqueue (functions.php:269). Cardo ships 400
	 * and 700 only, so a heading declaring font-weight: 600 renders at 700 - no
	 * weight DECLARATION is changed anywhere, that is just CSS font matching.
	 *
	 * Body, UI and wordmark faces are untouched: --font-body, --font-script and
	 * --font-display all keep their values.
	 */
	/* ORPHANED 2026-09-08 fraunces: Cardo retired from the enqueue and all three
	   consumers repointed at --font-display. Token kept, not deleted; nothing reads it. */
	--font-cardo:   'Cardo', Georgia, 'Times New Roman', serif;
	/* END ROLLBACK 2026-09-08 cardo */

	/* Display tracking. Headlines only — NOT the uppercase eyebrows, which keep
	 * their positive letter-spacing. */
	--track-display: -0.02em;

	/*
	 * Legacy aliases. Every existing var(--font-serif) / var(--font-sans) call
	 * site follows the new system with no edit. The ~17 real headings pick up
	 * Montserrat for free; the non-heading serif selectors are moved to
	 * --font-body explicitly in their own files.
	 */
	/* ROLLBACK 2026-09-08 cardo, was: --font-serif: var(--font-display); */
	/* ROLLBACK 2026-09-08 fraunces, was: --font-serif: var(--font-cardo); */
	--font-serif: var(--font-display);
	--font-sans:  var(--font-body);

	/* Radii */
	--radius:    14px;
	--radius-sm: 12px;
	--radius-pill: 30px;

	/* Layout */
	--content-max: 980px;

	/* Logo sizing (added 2026-09-15, local only).
	 * ONE knob per location -- change just these two numbers to resize the logo.
	 * The asset is a square 500x500 PNG and both rules pair this with width:auto,
	 * so setting the height alone keeps the aspect ratio; never add a width.
	 * Consumed by .rnf-portal-brand img (portal.css) and .rnf-foot-brand-row img (offer.css).
	 * Each is also redeclared inside a mobile media query in its own file. */
	--logo-h-header: 49px;  /* was 34px (max-height, portal.css) */
	--logo-h-footer: 58px;  /* was 40px (height, offer.css) */
}

/* Base reset scoped to the theme body */
body {
	margin: 0;
	font-family: var(--font-sans);
	color: var(--ink);
	background: var(--paper);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--pine);
}