/**
 * R2 Site Feedback — Design tokens (v2.0.0)
 *
 * All tokens scoped to the .r2fb-v2 root so they never leak into host themes
 * or WP admin base styles. Every v2 container (FAB wrapper, portal body,
 * admin .wrap) carries the .r2fb-v2 class.
 *
 * Warm & friendly palette — stone/sand neutrals + coral accent.
 * No pure-black shadows — all elevation tinted warm (rgba(49,36,18,...)).
 */

.r2fb-v2 {
	/* === Color — surfaces === */
	--r2fb-bg-page:      #FAF7F2;
	--r2fb-bg-card:      #FFFFFF;
	--r2fb-bg-muted:     #F3EDE3;
	--r2fb-bg-subtle:    #EDE6D9;
	--r2fb-bg-overlay:   rgba(43, 42, 39, .58);

	/* === Color — borders === */
	--r2fb-border:       #E1D9C8;
	--r2fb-border-soft:  #EFE8DB;
	--r2fb-border-strong:#C9BFA8;

	/* === Color — text === */
	--r2fb-text:         #2B2A27;
	--r2fb-text-muted:   #6B6860;
	--r2fb-text-soft:    #9B9790;
	--r2fb-text-inverse: #FFFFFF;

	/* === Color — accent === */
	--r2fb-accent:       #E8624A;
	--r2fb-accent-hover: #D2523C;
	--r2fb-accent-soft:  #FBE8E3;
	--r2fb-accent-strong:#B83E2B;

	/* === Color — status === */
	--r2fb-success:      #4F9D6B;
	--r2fb-success-soft: #E5F1E9;
	--r2fb-warning:      #D9A441;
	--r2fb-warning-soft: #FAEFD6;
	--r2fb-danger:       #C94C3F;
	--r2fb-danger-soft:  #F7E2DE;
	--r2fb-info:         #527E9B;
	--r2fb-info-soft:    #E1EAF1;

	/* Board column tints (aliases for status-soft values, scoped to board use) */
	--r2fb-amber-soft:   #FAEFD6;
	--r2fb-success-soft-board: #E5F1E9;
	--r2fb-info-soft-board:    #E1EAF1;

	/* === Radius === */
	--r2fb-r-xs: 4px;
	--r2fb-r-sm: 6px;
	--r2fb-r-md: 10px;
	--r2fb-r-lg: 14px;
	--r2fb-r-xl: 20px;
	--r2fb-r-pill: 999px;

	/* === Elevation (warm-tinted) === */
	--r2fb-shadow-1: 0 1px 2px rgba(49, 36, 18, .05);
	--r2fb-shadow-2: 0 2px 6px rgba(49, 36, 18, .06), 0 1px 2px rgba(49, 36, 18, .04);
	--r2fb-shadow-3: 0 8px 24px rgba(49, 36, 18, .08), 0 2px 6px rgba(49, 36, 18, .05);
	--r2fb-shadow-4: 0 24px 48px rgba(49, 36, 18, .12), 0 6px 16px rgba(49, 36, 18, .06);
	--r2fb-shadow-focus: 0 0 0 3px var(--r2fb-accent-soft), 0 0 0 1px var(--r2fb-accent);

	/* === Spacing (4px grid) === */
	--r2fb-s-0:  0;
	--r2fb-s-1:  4px;
	--r2fb-s-2:  8px;
	--r2fb-s-3:  12px;
	--r2fb-s-4:  16px;
	--r2fb-s-5:  20px;
	--r2fb-s-6:  24px;
	--r2fb-s-8:  32px;
	--r2fb-s-10: 40px;
	--r2fb-s-12: 48px;
	--r2fb-s-16: 64px;

	/* === Typography === */
	--r2fb-font-sans:
		"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	--r2fb-font-serif:
		"Lora", Georgia, "Times New Roman", Times, serif;
	--r2fb-font-mono:
		ui-monospace, "SF Mono", "Roboto Mono", "Fira Code", Menlo, Consolas,
		monospace;

	/*
	 * Font-size tokens are intentionally `px`, NOT `rem`.
	 * Some host themes (e.g. VREP on dev.vrep.de) set `html { font-size: … }`
	 * as a fluid `vw`-based value, which would blow our `rem` tokens up to
	 * 80+ px on wide viewports. `px` tokens stay predictable across hosts
	 * and still scale with browser zoom (browsers multiply px by zoom level).
	 * Any future accessibility tweak can swap these back to `rem` once we
	 * also reset `font-size` on `.r2fb-v2` roots — keep them `px` for 2.0.x.
	 */
	--r2fb-fs-xs:   12px;
	--r2fb-fs-sm:   13px;
	--r2fb-fs-md:   14px;
	--r2fb-fs-base: 16px;
	--r2fb-fs-lg:   18px;
	--r2fb-fs-xl:   20px;
	--r2fb-fs-2xl:  24px;
	--r2fb-fs-3xl:  32px;
	--r2fb-fs-4xl:  40px;

	--r2fb-lh-tight: 1.2;
	--r2fb-lh-dense: 1.4;
	--r2fb-lh-body:  1.55;

	--r2fb-fw-regular: 400;
	--r2fb-fw-medium:  500;
	--r2fb-fw-semi:    600;
	--r2fb-fw-bold:    700;

	/* === Motion === */
	--r2fb-ease: cubic-bezier(.2, .8, .2, 1);
	--r2fb-dur-fast: 120ms;
	--r2fb-dur:      200ms;
	--r2fb-dur-slow: 320ms;

	/* === Z-index scale (kept high to sit above host themes) === */
	--r2fb-z-base:    2147483000;
	--r2fb-z-pin:     2147483100;
	--r2fb-z-fab:     2147483200;
	--r2fb-z-overlay: 2147483600;
	--r2fb-z-modal:   2147483700;
	--r2fb-z-toast:   2147483800;
}

/* Reduced motion — global override, scoped to v2 so host themes are untouched */
@media (prefers-reduced-motion: reduce) {
	.r2fb-v2,
	.r2fb-v2 *,
	.r2fb-v2 *::before,
	.r2fb-v2 *::after {
		transition-duration: .001ms !important;
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}