/**
 * Rood Cycle Center - root design tokens
 *
 * Laadt ná Avada fusion-dynamic-css zodat Global Options leidend zijn.
 * Gebruik in child theme CSS de semantic tokens (--background, --primary, …).
 * Module-specifieke aliassen (--rc-*) verwijzen naar dezelfde bron.
 */

:root {
	/* ── Avada bridge ───────────────────────────────────────────
	   Leest Global Color Palette, typography en forms uit Avada.
	   Fallbacks = Rood Cycle Center design (spec). */

	--rc-avada-primary: var(--primary_color, var(--awb-color5, #ce1b15));
	--rc-avada-accent: var(--awb-color4, var(--primary_color, #ce1b15));
	--rc-avada-text: var(--body_typography-color, var(--awb-color8, #2a211d));
	--rc-avada-text-muted: var(--awb-color6, #7a6f69);
	--rc-avada-bg: var(--content_bg_color, var(--awb-color1, #ffffff));
	--rc-avada-surface: var(--awb-color2, #f5efe6);
	--rc-avada-surface-alt: var(--awb-color3, #f2f3f5);
	--rc-avada-border: var(--form_border_color, var(--awb-color3, #e5e0dc));
	--rc-avada-header-bg: var(--header_bg_color, var(--rc-avada-bg));
	--rc-avada-header-border: var(--header_border_color, var(--rc-avada-border));

	--rc-avada-link: var(--link_color, var(--rc-avada-primary));
	--rc-avada-link-hover: var(--link_hover_color, var(--rc-avada-primary));

	--rc-avada-font: var(--body_typography-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
	--rc-avada-font-weight: var(--body_typography-font-weight, 400);
	--rc-avada-line-height: var(--body_typography-line-height, 1.5);

	--rc-avada-radius: var(--button_border_radius, 10px);
	--rc-avada-form-radius: var(--form_border_radius, var(--rc-avada-radius));
	--rc-avada-button-bg: var(--button_gradient_top_color, var(--rc-avada-primary));
	--rc-avada-button-text: var(--button_accent_color, #ffffff);

	/* ── Semantic tokens (preferred in custom CSS) ───────────── */

	--background: var(--rc-avada-bg);
	--foreground: var(--rc-avada-text);
	--foreground-75: color-mix(in srgb, var(--foreground) 75%, transparent);
	--foreground-80: color-mix(in srgb, var(--foreground) 80%, transparent);
	--foreground-60: color-mix(in srgb, var(--foreground) 60%, transparent);

	--primary: var(--rc-avada-primary);
	--primary-foreground: var(--rc-avada-button-text);
	--primary-08: color-mix(in srgb, var(--primary) 8%, transparent);
	--primary-10: color-mix(in srgb, var(--primary) 10%, transparent);
	--primary-20: color-mix(in srgb, var(--primary) 20%, transparent);
	--primary-90: color-mix(in srgb, var(--primary) 90%, transparent);

	--secondary: var(--rc-avada-surface);
	--secondary-60: color-mix(in srgb, var(--secondary) 60%, transparent);
	--secondary-40: color-mix(in srgb, var(--secondary) 40%, transparent);

	--muted-foreground: var(--rc-avada-text-muted);
	--border: var(--rc-avada-border);
	--border-60: color-mix(in srgb, var(--border) 60%, transparent);

	--link: var(--rc-avada-link);
	--link-hover: var(--rc-avada-link-hover);

	--font-family: var(--rc-avada-font);
	--font-weight: var(--rc-avada-font-weight);
	--line-height: var(--rc-avada-line-height);

	--radius: var(--rc-avada-radius);
	--radius-md: 6px;
	--radius-btn: 8px;
	--radius-2xl: 16px;
	--radius-3xl: 24px;
	--radius-pill: 9999px;
	--radius-form: var(--rc-avada-form-radius);

	--card: var(--background);
	--brand-soft: color-mix(in srgb, var(--primary) 8%, #ffffff);
	--gold: #d4a35a;
	--sale: #e67e22;

	/* ── Layout & effect tokens ──────────────────────────────── */

	--container: 1280px;
	--container-px: 24px;
	--shadow-card: 0 12px 32px rgba(42, 33, 29, 0.08);
	--shadow-mega: 0 24px 40px -24px color-mix(in srgb, var(--foreground) 18%, transparent);
	--shadow-lift: 0 20px 50px -20px color-mix(in srgb, var(--foreground) 35%, transparent);
	--shadow-glow: 0 10px 40px -10px color-mix(in srgb, var(--primary) 45%, transparent);
	--gradient-feature-overlay: linear-gradient(
		to top,
		color-mix(in srgb, var(--foreground) 85%, transparent) 0%,
		color-mix(in srgb, var(--foreground) 15%, transparent) 55%,
		transparent 100%
	);

	--transition: 200ms ease-out;
	--transition-slow: 300ms ease-out;
	--ease: cubic-bezier(0.4, 0, 0.2, 1);

	--z-header: 99991;
	/* Popups/off-canvas boven sticky header + bottom nav (99991 + 20) */
	--z-overlay: 100011;

	/* ── Module aliassen (--rc-*) ──────────────────────────────
	   Bestaande component-CSS blijft werken; wijst naar semantic. */

	--rc-background: var(--background);
	--rc-foreground: var(--foreground);
	--rc-foreground-75: var(--foreground-75);
	--rc-foreground-80: var(--foreground-80);
	--rc-foreground-60: var(--foreground-60);
	--rc-primary: var(--primary);
	--rc-primary-foreground: var(--primary-foreground);
	--rc-primary-08: var(--primary-08);
	--rc-primary-10: var(--primary-10);
	--rc-primary-20: var(--primary-20);
	--rc-primary-90: var(--primary-90);
	--rc-secondary: var(--secondary);
	--rc-secondary-60: var(--secondary-60);
	--rc-secondary-40: var(--secondary-40);
	--rc-muted-foreground: var(--muted-foreground);
	--rc-border: var(--border);
	--rc-border-60: var(--border-60);
	--rc-radius: var(--radius);
	--rc-radius-md: var(--radius-md);
	--rc-radius-btn: var(--radius-btn);
	--rc-radius-2xl: var(--radius-2xl);
	--rc-radius-3xl: var(--radius-3xl);
	--rc-radius-pill: var(--radius-pill);
	--rc-card: var(--card);
	--rc-brand-soft: var(--brand-soft);
	--rc-gold: var(--gold);
	--rc-shadow-card: var(--shadow-card);
	--rc-shadow-mega: var(--shadow-mega);
	--rc-shadow-lift: var(--shadow-lift);
	--rc-shadow-glow: var(--shadow-glow);
	--rc-container: var(--container);
	--rc-container-px: var(--container-px);
	--rc-top-height: 80px;
	--rc-nav-height: 48px;
	--rc-z-header: var(--z-header);
	--rc-transition: var(--transition);
	--rc-transition-slow: var(--transition-slow);
	--rc-header-offset: 0px;
}