/**
 * Design tokens — single source of truth for theme + offers plugin.
 * Inlined in <head> and enqueued as handle `lux-variables`.
 */

:root {
	/* Spacing */
	--space-1: 0.25rem;  /* 4px */
	--space-2: 0.5rem;   /* 8px */
	--space-3: 0.75rem;  /* 12px */
	--space-4: 1rem;     /* 16px */
	--space-5: 1.25rem;  /* 20px */
	--space-6: 1.5rem;   /* 24px */
	--space-7: 1.75rem;  /* 28px */
	--space-8: 2rem;     /* 32px */
	--space-9: 2.25rem;  /* 36px */
	--space-10: 2.75rem; /* 44px */
	--space-11: 3rem;    /* 48px */
	--space-12: 4rem;    /* 64px */

	/* Neutrals */
	--color-white: #fff;
	--color-black: #0F0C08;
	--color-grey-50: #FCFAF5;
	--color-grey-100: #F9F7F1;
	--color-grey-200: #EDE9DF;
	--color-grey-300: #DEDAD0;
	--color-grey-400: #C5C0B4;
	--color-grey-500: #A39E91;
	--color-grey-600: #888A8D;
	--color-grey-700: #717377;
	--color-grey-800: #56585C;
	--color-grey-900: #36383C;
	--color-grey-950: #2C2D30;

	/* Semantic */
	--color-brand: #0F464F;
	--color-brand-hover: #125660;
	--color-brand-active: #09847E;
	--color-accent: #00A07D;
	--color-new: #BFE9C8;
	--color-highlight: #4EFEB9;
	--color-danger: #D43044;
	--color-coral: #C14D22;
	--color-coral-hover: #A33F1C;
	--color-best-of: #D87B25;
	--color-gold: #78704E;
	--color-luxplus: #304dab;
	--color-text: var(--color-black);
	--color-text-muted: var(--color-grey-700);
	--color-surface: var(--color-white);
	--color-surface-muted: var(--color-grey-100);
	--color-border: var(--color-grey-300);

	--btn-radius: 99px;
	--card-radius: 8px;

	--menu-shadow: 0 0 2px rgba(0, 0, 0, 0.1), 0 0 17px rgba(0, 0, 0, 0.05);
}