/*
 * FusionCommerce design tokens.
 *
 * Final redesign palette:
 * - values are aligned to the approved PlantExtrakt Figma direction;
 * - component/page CSS should reuse these tokens instead of defining parallel color variables;
 * - keep client-specific visual decisions here so the rest of the CSS stays clean.
 */

:root {
	--font-sans: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font-body: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font-heading: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	/* Brand */
	--color-primary: #005A35;
	--color-primary-2: #249B3E;
	--color-primary-rgb: 0, 90, 53;
	--color-primary-dark: #004627;
	--color-primary-strong: #00351F;
	--color-primary-soft: #E9E8D6;
	--color-primary-soft-2: #F6F1EE;

	/* Botanical accents */
	--color-botanical: #56745F;
	--color-botanical-soft: #EDF4EF;

	/* Warm accents */
	--color-clay: #E2725B;
	--color-clay-soft: #FBEDEA;
	--color-sand: #F6F1EE;
	--color-cream: #E9E8D6;

	/* Commercial accent, use rarely */
	--color-accent: #E2725B;
	--color-accent-rgb: 226, 114, 91;
	--color-accent-dark: #C95F4B;
	--color-accent-soft: #FBEDEA;

	/* Secondary warm/olive alias */
	--color-secondary: #E9E8D6;
	
	--color-secondary-dark: #E2725B;
	--color-secondary-soft: #F5F5F5;
	--color-secondary-rgb: 233, 232, 214;

	/* Neutrals */
	--color-text: #222222;
	--color-text-strong: #2B343C;
	--color-text-muted: #909090;
	--color-surface: #FFFFFF;
	--color-surface-alt: var(--color-cream);
	--color-surface-soft: #F5F5F5;
	--color-surface-soft-hover: #EDEDED;
	--color-border: #E3E0DC;
	--color-border-strong: #E9E8D6;
	--color-border-soft: #F6F1EE;
	--color-border-ui: #F5F5F5;
	--color-border-price: #DDD2CC;
	--color-black: #000000;
	--color-black-rgb: 0, 0, 0;
	--color-white: #FFFFFF;
	--color-white-rgb: 255, 255, 255;

	/* Pastels */
	--color-pastel-green: #E6F0EB;
	--color-pastel-sage: #E9E8D6;
	--color-pastel-mint: #EDF4EF;
	--color-pastel-sand: #F6F1EE;
	--color-pastel-clay: #FBEDEA;
	--color-pastel-blue: #EDF4F7;

	/* Functional */
	--color-success: #249B3E;
	--color-danger: #FF383C;
	--color-danger-dark: #D92F32;
	--color-rating: #F5B540;
	--color-availability-text: #249B3E;

	/* Links */
	--color-link: var(--color-primary);
	--color-link-hover: var(--color-primary-dark);
	--color-link-underline: rgba(var(--color-primary-rgb), 0.28);
	--color-footer-link: rgba(var(--color-white-rgb), 0.78);
	--color-footer-link-hover: var(--color-white);

	/* Social */
	--color-facebook: #1877F2;
	--color-youtube: #FF0000;
	--color-instagram: #E4405F;
	--color-instagram-1: #F58529;
	--color-instagram-2: #FEDA77;
	--color-instagram-3: #DD2A7B;
	--color-instagram-4: #8134AF;
	--color-instagram-5: #515BD4;
	--color-tiktok-cyan: #69C9D0;
	--color-tiktok-magenta: #EE1D52;

	/* Effects */
	--shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.04);
	--shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 14px 34px rgba(0, 0, 0, 0.09);
	--shadow-surface: var(--shadow-md);
	--shadow-menu: 0 16px 34px rgba(0, 0, 0, 0.12);
	--shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.14);
	--border-primary-soft: rgba(var(--color-primary-rgb), 0.06);
	--border-primary-soft-08: rgba(var(--color-primary-rgb), 0.08);
	--focus-ring-primary: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.14);
	--focus-outline-primary: 2px solid rgba(var(--color-primary-rgb), 0.25);
	--focus-outline-offset: 2px;
	--footer-social-inset: 0 0 0 1px rgba(var(--color-white-rgb), 0.10) inset;

	/* VM effects and colors */
	--shadow-category-card-soft: 0 8px 20px rgba(var(--color-black-rgb), 0.05),
		0 2px 6px rgba(var(--color-primary-rgb), 0.04);
	--shadow-category-card-soft-hover: 0 14px 28px rgba(var(--color-black-rgb), 0.07),
		0 4px 10px rgba(var(--color-primary-rgb), 0.06);
	--category-card-border: rgba(var(--color-primary-rgb), 0.08);
	--category-card-border-hover: rgba(var(--color-primary-rgb), 0.14);
	--category-card-separator: rgba(var(--color-primary-rgb), 0.10);
	--category-card-separator-hover: rgba(var(--color-primary-rgb), 0.18);
	--color-rating-active: #F5B540;
	--color-rating-empty: #D7D7D7;
	--color-rating-meta: var(--color-text-muted);

	/* Rounded UI */
	--bs-border-radius: 0.30rem;
	--bs-border-radius-sm: 0.45rem;
	--bs-border-radius-lg: 0.9rem;
	--bs-border-radius-xl: 1.1rem;
	--bs-border-radius-xxl: 1.35rem;
	--bs-border-radius-pill: 50rem;

	/* Bootstrap remap */
	--bs-primary: var(--color-primary);
	--bs-primary-rgb: var(--color-primary-rgb);
	--bs-secondary: var(--color-sand);
	--bs-secondary-rgb: 246, 241, 238;
	--bs-success: var(--color-success);
	--bs-success-rgb: 36, 155, 62;
	--bs-warning: var(--color-secondary);
	--bs-warning-rgb: var(--color-secondary-rgb);
	--bs-danger: var(--color-danger);
	--bs-danger-rgb: 255, 56, 60;
	--bs-body-color: var(--color-text);
	--bs-body-bg: var(--color-surface);
	--bs-border-color: var(--color-border);
	--bs-secondary-color: var(--color-text-muted);
	--bs-link-color: var(--color-link);
	--bs-link-hover-color: var(--color-link-hover);
	--bs-light: var(--color-cream);
	--bs-light-rgb: 246, 241, 238;
	--bs-heading-color: var(--color-text-strong);

	--plx-vm-filter-sidebar-sticky-offset: 1rem;
}