/**
 * Design tokens extracted from the Claude Design source (docs/design-analysis.md §2).
 * Every other stylesheet in this theme reads colors/spacing/radius/shadow from here —
 * nothing below should be hardcoded again in component styles.
 */
:root {
	/* Backgrounds */
	--safi-bg: #f5f0e7;
	--safi-bg-alt: #ece5d6;
	--safi-surface: #fffdf8;
	--safi-surface-input: #fffefb;

	/* Brand / primary — Phase 3 palette shift (docs/audience-split-plan.md §8).
	   Direction taken from docs/ui_ux.html's Bright Blue #0E9DD9. The key measurement:
	   #0E9DD9 is hsl(198, 88%, 45%) and the previous --safi-teal was hsl(199, 32%, 45%) —
	   identical hue, identical lightness. The whole difference was SATURATION. So this is
	   not a hue rebrand: saturation rises toward the designer value and lightness drops
	   only as far as AA requires, which is why the site still reads as the same brand.
	   Raw #0E9DD9 is never used — at 3.08:1 on white and 2.71:1 on --safi-bg it fails AA
	   for text outright. Same darkened-derivative approach as --safi-green below.
	   Every ratio quoted here is computed with the WCAG relative-luminance formula, the
	   same method as docs/accessibility-audit.md §1. */
	--safi-teal: #1b7298; /* hsl(198,70%,35%), was #4f8198 hsl(199,32%,45%). 5.38:1 with white — the old value was 4.26:1, which silently failed AA under white text in .news-pagination .current and the .step-card__number digit (18.4px/700 = below the 18.66px large-text threshold). Both are fixed by this change; see the Phase 3 note in docs/accessibility-audit.md §1. */
	--safi-teal-hover: #155f7f; /* hsl(198,72%,29%), was #3f6f86. 7.06:1 white / 6.22:1 on --safi-bg. Still the darker interaction + small-text variant, now with a much wider margin. */
	--safi-petrol: #20394b; /* hsl(205,40%,21%), was #28464e hsl(193,32%,23%). Hue moved off teal toward navy; this is --safi-text, so it is the single biggest contributor to the cooler feel. 10.58:1 on --safi-bg (was 8.91:1). */
	/* Post-3.1 footer nudge: hsl(204,41%,20%) → hsl(201,50%,22%). Lighter and more
	   saturated so the footer sits in the new blue family instead of reading as a flat
	   slate slab, while staying unmistakably a dark navy footer — deliberately NOT
	   --safi-teal, which would turn the whole block into a button.
	   --safi-gold is the hard ceiling here, not the body text: as the .site-footer__cross-link
	   it is real text needing 4.5:1, and it breaks at about hsl(_,_,25%). This value keeps
	   it at 4.86:1 with margin to spare rather than shaving the limit. */
	--safi-footer-bg: #1c4054; /* was #1e3748. Gold cross-link 4.86:1, body text 8.89:1. */
	--safi-footer-bg-hover: #142e3e; /* was #132634. Tracks the same lift; only .btn--dark:hover uses it, white text 14.09:1. */
	--safi-green: #376c67; /* hsl(175,32%,32%), was #457560 hsl(155,26%,36%) — itself already darkened from #6fa792 (2.76:1 with white, fail) during the accessibility audit. Hue moved from sage toward deep teal so the gradient below reads blue→teal rather than blue→green; 5.99:1 with white, up from 5.29:1, so the audit's original fix is strengthened rather than undone. */
	--safi-gold: #c9a86a; /* unchanged — the warm counterpoint to the cooler blues, and the dark-surface focus ring (5.48:1 on the new --safi-footer-bg, up from 4.61:1) */

	/* Light teal tints (Phase 3.1). Introduced so the blue is present in the chrome as a
	   surface, not only as ink — nav hover/current states and icon tiles. Both are
	   backgrounds only; they are never used as text or as a boundary that carries meaning,
	   so no 1.4.11 requirement attaches to the tint itself, only to what sits on it:
	   --safi-teal-hover on --safi-teal-tint = 5.79:1, on --safi-teal-tint-strong = 5.30:1;
	   --safi-teal icons on --safi-teal-tint = 4.41:1. */
	--safi-teal-tint: #dfeaf4;
	--safi-teal-tint-strong: #cfe2ee;

	/* Status */
	--safi-success: #5f9e7f;
	--safi-success-strong: #37694f;
	--safi-success-bg: #e7f0ea;
	--safi-warning: #c08a52;
	--safi-warning-strong: #7e5c22;
	--safi-warning-bg: #f6eedb;

	/* Borders (warm neutral) */
	--safi-border: #e3dbcb;
	--safi-border-card: #ebe3d3;
	--safi-border-strong: #e6ddcc;
	--safi-border-soft: #efe7d7;
	--safi-border-input: #ddd5c5;
	--safi-border-chip: #e0d8c8;

	/* Text */
	--safi-text: var(--safi-petrol);
	--safi-text-muted-1: #5d6f72;
	--safi-text-muted-2: #46585c;
	--safi-text-muted-3: #56686c;
	--safi-text-muted-4: #3f5256;
	--safi-text-muted-5: #7a8a8d; /* 3.53:1 on --safi-surface — large-text/UI use only, not body copy */
	--safi-text-muted-6: #5f6c71; /* darkened from #8a979a (2.96:1, WCAG AA fail) to 5.34:1 on --safi-surface — see docs/accessibility-audit.md */
	--safi-text-muted-7: #74848a; /* darkened from #9aa9ab (2.39:1, fail) to 3.82:1 — icon-stroke/separator use only, not body copy */

	/* Dark-surface (footer / contact panel) text */
	--safi-text-on-dark: #dfe9ea;
	--safi-text-on-dark-muted: #a9bdbf;
	--safi-text-on-dark-link: #d6e2e3;

	--safi-selection-bg: #cfe0d8;

	/* Business/map category colour.
	   The per-slug tokens that used to live here (--safi-cat-hotel etc.) are gone: category
	   colour is now chosen per term in wp-admin from a fixed, pre-measured swatch list, and
	   arrives as an inline --safi-cat / --safi-cat-ink pair from safi_category_style_attr()
	   in inc/categories.php. That removes the list of known slugs from CSS entirely, which
	   is what made a newly-added taxonomy term render as hotel blue and fail 1.4.11.
	   The value below is the neutral fallback used when a term has no swatch chosen. */
	--safi-cat-default: #5f7a86;

	/* Typography */
	--safi-font-heading: 'Literata', serif;
	--safi-font-body: 'Source Sans 3', system-ui, -apple-system, sans-serif;

	/* Layout */
	--safi-max-width: 1120px;
	--safi-max-width-wide: 1360px; /* header only — 7 Greek nav items + logo need more room than content sections. Independent of the off-canvas breakpoint (nav-drawer.css, 1024px). */
	--safi-max-width-narrow: 1000px;
	--safi-section-padding-y: 96px;
	--safi-section-padding-x: 24px;

	/* Radius */
	--safi-radius-pill: 999px;
	--safi-radius-lg: 20px;
	--safi-radius-md: 16px;
	--safi-radius-sm: 12px;

	/* Shadow */
	--safi-shadow-card: 0 6px 18px rgba(28, 52, 60, 0.05);
	--safi-shadow-card-lg: 0 10px 28px rgba(28, 52, 60, 0.07);
	--safi-shadow-elevated: 0 14px 40px rgba(22, 46, 54, 0.2);
	--safi-shadow-cta: 0 10px 24px rgba(43, 90, 110, 0.32);

	/* Focus ring — --safi-gold itself (#c9a86a) measures only ~2:1 against the site's
	   light backgrounds (cream/white), failing WCAG 1.4.11's 3:1 minimum for a focus
	   indicator — see docs/accessibility-audit.md. --safi-focus-ring-color is a
	   separate, darker token used on light backgrounds (the vast majority of the
	   site); dark-surface components (footer, contact panel) override it back to
	   --safi-gold, which clears 3:1 there. */
	--safi-focus-ring-color: #7d5f2e; /* ~4.4-4.9:1 on cream/white/alt backgrounds */
	--safi-focus-ring: 3px solid var(--safi-focus-ring-color);
	--safi-focus-offset: 2px;
}