/**
 * 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, #231d17));
	--rc-avada-text-muted: var(--awb-color6, #807467);
	--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, #e6ddd0));
	--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-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-2xl: 16px;
	--radius-pill: 9999px;
	--radius-form: var(--rc-avada-form-radius);

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

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

	--container: 1280px;
	--container-px: 24px;
	--shadow-card: 0 10px 30px -12px rgba(0, 0, 0, 0.15);
	--shadow-mega: 0 24px 40px -24px color-mix(in srgb, var(--foreground) 18%, 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;

	/* ── 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-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-2xl: var(--radius-2xl);
	--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-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;
}