/* ============================================================
   Auto Repair Tune-Up · tokens

   Light is the literal palette in theme.json. Dark is applied here, twice —
   once via the OS media query and once via [data-theme], so the header toggle
   wins in BOTH directions (OS light + chosen dark, and OS dark + chosen light).

   Dark overrides the --wp--preset--color--* custom properties THEMSELVES, so
   blocks styled from theme.json flip too, with no per-block dark rules.

   Retheming dark mode:
     Every dark value is read as var(--ar-dark-<name>, <fallback>). This file
     never DECLARES those variables, so a style variation can define them in
     its theme.json "styles.css" with zero cascade fight — declared wins,
     undeclared falls back to the values below.

   Components consume ONLY these tokens — never a raw hex.
   ============================================================ */

:root {
	/* semantic aliases over the theme.json presets */
	--ar-accent: var(--wp--preset--color--accent);
	--ar-accent-strong: var(--wp--preset--color--accent-strong);
	--ar-accent-soft: var(--wp--preset--color--accent-soft);
	--ar-bg: var(--wp--preset--color--base);
	--ar-surface: var(--wp--preset--color--surface);
	--ar-border: var(--wp--preset--color--border);
	--ar-text: var(--wp--preset--color--contrast);
	--ar-text-2: var(--wp--preset--color--muted);
	--ar-success: var(--wp--preset--color--success);
	--ar-info: var(--wp--preset--color--info);
	--ar-warning: var(--wp--preset--color--warning);
	--ar-error: var(--wp--preset--color--error);

	/* AA guard: the button surface stays identical in both modes — brand red
	   #D62828 with white text measures 5.01:1. The dark-mode accent #FF3B30 is
	   for links and accents ONLY; as a button fill white on it is ~3.3:1 and
	   fails AA. Never point this at --ar-accent. */
	--ar-btn-bg: #d62828;
	--ar-btn-bg-hover: #b81f1f;

	/* "On accent" pair — for content sitting on the accent gradient, which is
	   dark in BOTH colour modes. These deliberately do NOT flip: using the
	   mode-aware --ar-text here renders white-on-white in dark mode. Declared
	   in :root only, never in the dark blocks below. */
	--ar-on-accent: #ffffff;

	/* ---- FIXED tokens: identical in both colour modes, by design ----
	   The brand's dark band and the hero photograph are dark in light mode
	   AND dark mode, so anything sitting on them must NOT flip — a
	   mode-aware token there renders white-on-white half the time.
	   Declared in :root only; never repeated in the dark blocks below. */
	--ar-fixed-dark: #0d1117;          /* guide: DARK — promise bar, insets */
	--ar-fixed-accent: #ff3b30;        /* guide: ACCENT RED — icons on dark */
	--ar-fixed-accent-photo: #ff5a4f;  /* lifted further for text over photography */
	--ar-star: #f5b301;                /* guide: review stars only */
	--ar-ase: #0a4d8c;                 /* third-party badge placeholder */
	--ar-fixed-darker: #05070a;        /* pressed state on the fixed-dark chip */

	/* ---- THE ANGLED CUT — one source for the brand's signature motif ----
	   guidelines/brand-angled-cut.html: "hero photos and dark bands meet
	   content on a 12–18° diagonal". 16° is mid-range.

	   Measured before this token existed: the hero ran at 19.3° and the closing
	   wedge at 18.4° — both outside the range, and not equal to each other.
	   Everything that draws the motif now derives from these two values, so it
	   cannot drift again.

	   --ar-oblique     : the angle, for transform: skewX()
	   --ar-oblique-tan : tan(16°), for clip-path runs = tan x height */
	--ar-oblique: 16deg;
	--ar-oblique-tan: 0.28675;
	--ar-on-accent-contrast: #0f172a;

	/* Non-colour tokens come from theme.json settings.custom, so the editor
	   controls and the stylesheets read the SAME source. Never redeclare a
	   literal here that theme.json already owns. */
	--ar-radius: var(--wp--custom--border-radius--md);
	--ar-radius-sm: var(--wp--custom--border-radius--sm);
	--ar-radius-lg: var(--wp--custom--border-radius--lg);
	--ar-radius-pill: var(--wp--custom--border-radius--pill);
	--ar-radius-xs: var(--wp--custom--border-radius--xs);
	--ar-radius-xl: var(--wp--custom--border-radius--xl);
	--ar-ease: var(--wp--custom--transition--base);
	--ar-ease-fast: var(--wp--custom--transition--fast);
	--ar-z-header: var(--wp--custom--z-index--header);

	--ar-shadow: var(--wp--preset--shadow--sm);
	--ar-shadow-lg: var(--wp--preset--shadow--lg);

	--ar-font-display: var(--wp--preset--font-family--display);
	--ar-font-body: var(--wp--preset--font-family--body);

	color-scheme: light;
}

/* ---- dark palette · single source, applied twice ----
   Keep these two blocks byte-identical. If you edit one, edit the other. */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--wp--preset--color--accent: var(--ar-dark-accent, #60a5fa);
		--wp--preset--color--accent-strong: var(--ar-dark-accent-strong, #93c5fd);
		--wp--preset--color--accent-soft: var(--ar-dark-accent-soft, #1e3a8a);
		--wp--preset--color--base: var(--ar-dark-base, #0b1120);
		--wp--preset--color--surface: var(--ar-dark-surface, #111827);
		--wp--preset--color--border: var(--ar-dark-border, #1f2937);
		--wp--preset--color--contrast: var(--ar-dark-contrast, #f8fafc);
		--wp--preset--color--muted: var(--ar-dark-muted, #94a3b8);
		--wp--preset--color--success: var(--ar-dark-success, #4ade80);
		--wp--preset--color--info: var(--ar-dark-info, #38bdf8);
		--wp--preset--color--warning: var(--ar-dark-warning, #fbbf24);
		--wp--preset--color--error: var(--ar-dark-error, #f87171);
		--wp--preset--gradient--accent-gradient: var(--ar-dark-accent-gradient, linear-gradient(135deg, #60a5fa 0%, #2563eb 100%));
		--wp--preset--gradient--soft-gradient: var(--ar-dark-soft-gradient, linear-gradient(180deg, #1e3a8a 0%, #0b1120 100%));
		--ar-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5);
		--ar-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.5), 0 16px 40px rgba(0, 0, 0, 0.6);
		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--wp--preset--color--accent: var(--ar-dark-accent, #60a5fa);
	--wp--preset--color--accent-strong: var(--ar-dark-accent-strong, #93c5fd);
	--wp--preset--color--accent-soft: var(--ar-dark-accent-soft, #1e3a8a);
	--wp--preset--color--base: var(--ar-dark-base, #0b1120);
	--wp--preset--color--surface: var(--ar-dark-surface, #111827);
	--wp--preset--color--border: var(--ar-dark-border, #1f2937);
	--wp--preset--color--contrast: var(--ar-dark-contrast, #f8fafc);
	--wp--preset--color--muted: var(--ar-dark-muted, #94a3b8);
	--wp--preset--color--success: var(--ar-dark-success, #4ade80);
	--wp--preset--color--info: var(--ar-dark-info, #38bdf8);
	--wp--preset--color--warning: var(--ar-dark-warning, #fbbf24);
	--wp--preset--color--error: var(--ar-dark-error, #f87171);
	--wp--preset--gradient--accent-gradient: var(--ar-dark-accent-gradient, linear-gradient(135deg, #60a5fa 0%, #2563eb 100%));
	--wp--preset--gradient--soft-gradient: var(--ar-dark-soft-gradient, linear-gradient(180deg, #1e3a8a 0%, #0b1120 100%));
	--ar-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5);
	--ar-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.5), 0 16px 40px rgba(0, 0, 0, 0.6);
	color-scheme: dark;
}