/**
 * Auto Car Finder — global design tokens.
 *
 * Single source of truth for brand colours and semantic surfaces.
 * Component styles should reference these variables — not raw hex/rgb.
 *
 * Marketplace brand palette (final):
 * - Primary orange #FF9501 = actions / CTAs (--hg-primary)
 * - Primary hover #E58600 = hover / pressed (--hg-primary-hover)
 * - Secondary dark teal #053742 = structure / identity
 * - White #FFFFFF = surfaces
 *
 * Brand-specific exceptions (do not remap to primary):
 * - --hg-color-whatsapp*
 * - Semantic success / warning / error / info / rating
 *
 * @package HG_Automotive
 * @since 0.32.0
 * @updated 0.42.26 Canonical brand orange #FF9501
 */

:root {
	/* ------------------------------------------------------------------ */
	/* Brand                                                              */
	/* ------------------------------------------------------------------ */
	--hg-primary: #ff9501;
	--hg-primary-hover: #e58600;
	--hg-color-primary: var(--hg-primary);
	--hg-color-primary-hover: var(--hg-primary-hover);
	--hg-color-primary-soft: #fff1e3;
	--hg-color-secondary: #053742;
	--hg-color-secondary-hover: #032b34;
	--hg-color-secondary-soft: #e6eff1;
	--hg-color-secondary-deep: var(--hg-color-secondary-hover);
	--hg-color-accent: var(--hg-primary);
	--hg-color-accent-hover: var(--hg-primary-hover);
	--hg-color-accent-soft: var(--hg-color-primary-soft);

	/* ------------------------------------------------------------------ */
	/* Surfaces                                                           */
	/* ------------------------------------------------------------------ */
	--hg-color-bg: #ffffff;
	--hg-color-bg-subtle: #f7fafb;
	--hg-color-bg-muted: #f0f4f5;
	--hg-color-bg-page-mid: #eef3f4;
	--hg-color-card: #ffffff;
	--hg-color-border: #d8e1e3;
	--hg-color-border-strong: #b8c7ca;

	/* ------------------------------------------------------------------ */
	/* Text                                                               */
	/* ------------------------------------------------------------------ */
	--hg-color-text: #053742;
	--hg-color-text-secondary: #405a61;
	--hg-color-text-muted: #6b7f84;
	--hg-color-on-primary: #ffffff;
	--hg-color-on-dark: #ffffff;

	/* ------------------------------------------------------------------ */
	/* Semantic status (distinct from brand — do not remap)               */
	/* ------------------------------------------------------------------ */
	--hg-color-success: #067647;
	--hg-color-success-bg: #e8f6ee;
	--hg-color-success-soft: #ecfdf3;
	--hg-color-success-border: #abefc6;
	--hg-color-warning: #b54708;
	--hg-color-warning-bg: #fff6e5;
	--hg-color-warning-soft: #fffaeb;
	--hg-color-warning-border: #fedf89;
	--hg-color-warning-border-muted: #f0d7a8;
	--hg-color-warning-text: #7a4e00;
	--hg-color-error: #b42318;
	--hg-color-error-bg: #fdecec;
	--hg-color-error-soft: #fef3f2;
	--hg-color-error-border: #fecdca;
	--hg-color-info: #175cd3;
	--hg-color-info-bg: #eff8ff;
	--hg-color-info-border: #b2ddff;

	/* ------------------------------------------------------------------ */
	/* Brand-specific (do not replace with primary)                       */
	/* ------------------------------------------------------------------ */
	--hg-color-whatsapp: #25d366;
	--hg-color-whatsapp-hover: #1ebe57;
	--hg-color-whatsapp-border: #1dae57;
	--hg-color-whatsapp-border-strong: #1aad4f;
	--hg-color-whatsapp-soft: #e8f8ef;
	--hg-color-rating: #c48a1a;

	/* ------------------------------------------------------------------ */
	/* RGB channels for rgba(var(--token), a)                             */
	/* ------------------------------------------------------------------ */
	--hg-color-text-rgb: 5, 55, 66;
	--hg-color-secondary-rgb: 5, 55, 66;
	--hg-color-primary-rgb: 255, 149, 1;
	--hg-color-primary-hover-rgb: 229, 134, 0;
	--hg-color-card-rgb: 255, 255, 255;
	--hg-color-border-rgb: 216, 225, 227;
	--hg-color-whatsapp-rgb: 37, 211, 102;
	--hg-color-primary-soft-rgb: 255, 241, 227;
	--hg-color-secondary-soft-rgb: 230, 239, 241;
	--hg-color-rating-rgb: 196, 138, 26;
	--hg-color-info-rgb: 23, 92, 211;

	/* Dark chrome (footer / inverted surfaces) — secondary teal family */
	--hg-color-footer: var(--hg-color-secondary);
	--hg-color-footer-mid: #064553;
	--hg-color-footer-deep: var(--hg-color-secondary-hover);

	/* ------------------------------------------------------------------ */
	/* Shared chrome                                                      */
	/* ------------------------------------------------------------------ */
	--hg-font-sans: "Segoe UI Variable", "Segoe UI", Candara, Calibri, "Trebuchet MS", sans-serif;
	--hg-font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
	--hg-section-heading-size: clamp(1.25rem, 2vw, 1.5rem);
	--hg-radius: 12px;
	--hg-radius-sm: 8px;
	--hg-radius-lg: 16px;
	--hg-shadow: 0 1px 2px rgba(var(--hg-color-text-rgb), 0.04), 0 10px 28px rgba(var(--hg-color-text-rgb), 0.07);
	--hg-shadow-hover: 0 4px 12px rgba(var(--hg-color-text-rgb), 0.08), 0 18px 40px rgba(var(--hg-color-text-rgb), 0.1);
	--hg-shadow-soft: 0 1px 2px rgba(var(--hg-color-text-rgb), 0.04), 0 6px 18px rgba(var(--hg-color-text-rgb), 0.05);
	--hg-focus-ring: 0 0 0 3px rgba(var(--hg-color-primary-rgb), 0.32);
	--hg-transition: 160ms ease;
	/* Canonical content width — matches Theme_Layout_Config default (1200px preset). */
	--hg-container: 1200px;
	--hg-space-1: 0.25rem;
	--hg-space-2: 0.5rem;
	--hg-space-3: 0.75rem;
	--hg-space-4: 1rem;
	--hg-space-5: 1.5rem;
	--hg-space-6: 2rem;
	--hg-space-7: 3rem;
	--hg-space-8: 4rem;

	/* ------------------------------------------------------------------ */
	/* Back-compat aliases (--hg-auto-* used across legacy stylesheets)   */
	/* ------------------------------------------------------------------ */
	--hg-auto-color-ink: var(--hg-color-text);
	--hg-auto-color-steel: var(--hg-color-text-secondary);
	--hg-auto-color-muted: var(--hg-color-text-muted);
	--hg-auto-color-accent: var(--hg-color-primary);
	--hg-auto-color-accent-hover: var(--hg-color-primary-hover);
	--hg-auto-color-accent-soft: var(--hg-color-primary-soft);
	--hg-auto-color-surface: var(--hg-color-bg);
	--hg-auto-color-surface-elevated: var(--hg-color-card);
	--hg-auto-color-border: var(--hg-color-border);
	--hg-auto-color-border-strong: var(--hg-color-border-strong);
	--hg-auto-color-danger: var(--hg-color-error);
	--hg-auto-color-warning: var(--hg-color-warning);
	--hg-auto-color-success: var(--hg-color-success);
	--hg-auto-color-info: var(--hg-color-info);
	--hg-auto-font-sans: var(--hg-font-sans);
	--hg-auto-font-display: var(--hg-font-display);
	--hg-auto-radius: var(--hg-radius);
	--hg-auto-radius-sm: var(--hg-radius-sm);
	--hg-auto-radius-lg: var(--hg-radius-lg);
	--hg-auto-shadow: var(--hg-shadow);
	--hg-auto-shadow-hover: var(--hg-shadow-hover);
	--hg-auto-container: var(--hg-container);
	--hg-auto-space-1: var(--hg-space-1);
	--hg-auto-space-2: var(--hg-space-2);
	--hg-auto-space-3: var(--hg-space-3);
	--hg-auto-space-4: var(--hg-space-4);
	--hg-auto-space-5: var(--hg-space-5);
	--hg-auto-space-6: var(--hg-space-6);
	--hg-auto-space-7: var(--hg-space-7);
	--hg-auto-space-8: var(--hg-space-8);
	--hg-auto-focus: var(--hg-focus-ring);
	--hg-auto-transition: var(--hg-transition);
}