/**
 * Static design tokens.
 *
 * These are identical for every site and every request, so they live in a
 * cacheable file rather than being inlined per-response. The *settings-derived*
 * tokens — colour, fonts, radius seed, container — are emitted inline by
 * inc/tokens.php on wp_head.
 *
 * The two sets are disjoint: nothing here is also declared there. var() resolves
 * lazily at use time, so tokens below may reference PHP-emitted ones (the shadow
 * scale uses --av-deep-rgb) regardless of which file loads first.
 *
 * Loaded in three contexts — front end, block editor, admin settings — so the
 * editor and the colour pickers preview truthfully.
 */

:root {

	/* ---------------------------------------------------------- spacing
	 * 4px base scale. Components consume the semantic composites below,
	 * not the raw steps.
	 *
	 * Caveat: rem-based, and html{font-size:var(--av-base)}. At base_size 18
	 * every px target below is +12.5%. That is intentional — the system scales
	 * as one — but the brief's exact px figures hold only at base_size 16.
	 */
	--av-space-1: 0.25rem;
	--av-space-2: 0.5rem;
	--av-space-3: 0.75rem;
	--av-space-4: 1rem;
	--av-space-5: 1.25rem;
	--av-space-6: 1.5rem;
	--av-space-8: 2rem;
	--av-space-10: 2.5rem;
	--av-space-12: 3rem;
	--av-space-16: 4rem;
	--av-space-20: 5rem;
	--av-space-24: 6rem;
	--av-space-30: 7.5rem;

	/* Semantic composites — what components actually use. */
	/* Section rhythm. Both top and bottom take this, so two stacked sections
	   produce 2× the top figure of combined gap. The previous 64→120 ramp read
	   as too airy (up to 240px between sections); 48→88 keeps generous breathing
	   room on desktop without the interior pages feeling half-empty. */
	--av-section-y: clamp(3rem, 5vw, 5.5rem);              /* 48 → 88 */
	--av-section-y-sm: clamp(2rem, 4vw, 3.5rem);           /* 32 → 56 */
	--av-card-pad: clamp(1.5rem, 3vw, var(--av-space-8));   /* 24 → 32 */
	--av-gap: var(--av-space-6);                            /* 24 */
	--av-gap-sm: var(--av-space-3);
	--av-gap-lg: var(--av-space-10);
	--av-gutter: clamp(1rem, 4vw, 2rem);

	/* Rating gold. A convention rather than a brand colour — the same exception
	   the file makes for WhatsApp green. Cyan stars on white read as decoration;
	   gold reads as a rating, and it is the one warm note in an all-blue palette,
	   which is what stops the testimonial block looking inert. */
	--av-star: #F5A623;

	/* ---------------------------------------------------------- radius
	 * --av-radius-card / -img / -input / -sm are derived from the single
	 * `radius` setting in inc/tokens.php. Only the constant lives here.
	 */
	--av-radius-pill: 999px;

	/* ---------------------------------------------------------- shadows
	 * Soft only. Tinted with the deep brand colour rather than neutral black —
	 * a black shadow on a blue-tinted ground reads as grey dirt.
	 * inc/tokens.php overrides all of these with `none` when the
	 * Brand → shadow level setting is "flat".
	 */
	--av-shadow-xs: 0 1px 2px rgb(var(--av-deep-rgb) / 4%);
	--av-shadow-sm: 0 1px 3px rgb(var(--av-deep-rgb) / 5%), 0 1px 2px rgb(var(--av-deep-rgb) / 3%);
	--av-shadow-md: 0 4px 12px rgb(var(--av-deep-rgb) / 6%), 0 2px 4px rgb(var(--av-deep-rgb) / 4%);
	--av-shadow-lg: 0 12px 32px rgb(var(--av-deep-rgb) / 8%), 0 4px 8px rgb(var(--av-deep-rgb) / 4%);
	--av-shadow-xl: 0 24px 56px rgb(var(--av-deep-rgb) / 10%);
	--av-shadow-focus: 0 0 0 3px rgb(var(--av-primary-rgb) / 35%);

	/* ---------------------------------------------------------- motion
	 * The global prefers-reduced-motion block in main.css neutralises all of
	 * this. inc/tokens.php also zeroes the durations when the Brand →
	 * animations setting is off, reusing the same path with no extra CSS.
	 */
	--av-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--av-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--av-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--av-dur-fast: 120ms;
	--av-dur: 200ms;
	--av-dur-slow: 320ms;
	--av-dur-slower: 480ms;
	--av-lift: -4px;              /* card hover translateY */

	/* ---------------------------------------------------------- z-index
	 * One ladder. --av-z-skip deliberately outranks the modal so the skip
	 * link can never be trapped behind an open dialog.
	 */
	--av-z-base: 0;
	--av-z-raised: 10;
	--av-z-sticky: 100;
	--av-z-dropdown: 200;
	--av-z-overlay: 900;
	--av-z-modal: 1000;
	--av-z-toast: 1100;
	--av-z-skip: 1200;

	/* ---------------------------------------------------------- type
	 * The modular scale (--av-fs-h1..h4) is derived in inc/tokens.php from the
	 * `scale` setting. These are the fixed steps.
	 */
	--av-lh-tight: 1.15;
	--av-lh-snug: 1.35;
	--av-fs-xs: 0.75rem;
	--av-fs-sm: 0.875rem;
	--av-fs-lg: 1.125rem;
	--av-fs-xl: 1.25rem;

	/* ---------------------------------------------------------- icons
	 * Lucide is drawn for stroke-width 2 at 24px. 1.6 under-inks the
	 * geometric icons; 2.0 reads heavy at the 15–18px topbar sizes. 1.75 is
	 * the compromise. CSS beats the SVG presentation attribute, so this wins.
	 */
	--av-icon-stroke: 1.75;
	--av-icon-size: 24px;

	/* ---------------------------------------------------------- layout */
	--av-header-h: 76px;
	--av-header-h-stuck: 60px;

	/* ---------------------------------------------------------- derived colour
	 * Alpha variants computed in CSS from the PHP-emitted -rgb triplets, so
	 * they follow the client's colour choices with no extra settings.
	 */
	/*
	 * Alpha, not a lighter hue, so these track the client's text colour. But
	 * alpha over a near-white ground washes out fast, and the darkest ground
	 * these land on is --av-muted (#E7EDF4), which is the worst case for dark
	 * text. At the old 78%/58% they measured 4.08:1 and 2.76:1 — both under
	 * the 4.5:1 AA floor, on exactly the small supporting text that is already
	 * the hardest to read.
	 *
	 * These alphas are tied to --av-muted: darkening that ground to make the
	 * section alternation visible also cuts the contrast of everything sitting
	 * on it, so the two were retuned together. Re-measure if it changes again.
	 *
	 * Consequence worth knowing: on a near-white ground an AA-legal "subtle"
	 * tier cannot be much lighter than "muted" — the floor compresses them.
	 * Anything genuinely fainter than this is only safe for decoration that
	 * carries no information, and must be aria-hidden.
	 */
	--av-text-muted: rgb(var(--av-text-rgb) / 90%);
	--av-text-subtle: rgb(var(--av-text-rgb) / 86%);
	--av-border-soft: rgb(var(--av-ink-rgb) / 6%);
	--av-border-strong: rgb(var(--av-ink-rgb) / 14%);
	--av-overlay: rgb(var(--av-deep-rgb) / 60%);
	--av-scrim: rgb(var(--av-deep-rgb) / 4%);
	--av-on-dark: #FFFFFF;
	--av-on-dark-muted: rgb(255 255 255 / 72%);
	--av-on-dark-subtle: rgb(255 255 255 / 55%);
	--av-on-dark-border: rgb(255 255 255 / 14%);
	--av-on-dark-surface: rgb(255 255 255 / 7%);
}