/**
 * Resalah Academy — Design Tokens
 *
 * Single source of truth for color, spacing, radius, shadow and typography
 * values used across all custom (.resalah-*) components. New component
 * stylesheets must reference these variables instead of hard-coding values.
 *
 * NOTE: --resalah-pink / --resalah-green / --resalah-dark / --resalah-muted
 * already exist as brand values hard-coded inline in
 * wp-content/mu-plugins/resalah-header-footer.php and
 * wp-content/mu-plugins/resalah-shop-design.php. Values here intentionally
 * match those exactly. Those mu-plugins are legacy and are migrated into
 * this child theme's inc/ + assets/css/components/ structure one component
 * at a time; until a component is fully migrated, do not change its brand
 * value here without updating the matching mu-plugin too (see this theme's
 * README.md — Legacy code).
 */
:root {
	/* Brand colors (source of truth) */
	--resalah-pink: #cc3366;
	--resalah-pink-hover: #166533; /* matches legacy --resalah-hover-dark */
	--resalah-green: #84cc16;
	--resalah-green-dark: #6ea813;
	--resalah-dark: #0f172a;
	--resalah-muted: #55595c;
	--resalah-muted-2: #8a8f93;
	--resalah-border: #f1e2e8;
	--resalah-border-soft: #f3d9e3;
	--resalah-surface: #ffffff;
	--resalah-surface-tint: #fdf2f6;

	/* Semantic aliases — use these in new component CSS, not the raw brand vars above */
	--resalah-color-primary: var(--resalah-pink);
	--resalah-color-primary-hover: var(--resalah-pink-hover);
	--resalah-color-accent: var(--resalah-green);
	--resalah-color-accent-hover: var(--resalah-green-dark);
	--resalah-color-text: var(--resalah-dark);
	--resalah-color-text-muted: var(--resalah-muted);
	--resalah-color-surface: var(--resalah-surface);
	--resalah-color-surface-tint: var(--resalah-surface-tint);
	--resalah-color-border: var(--resalah-border);

	/* Typography */
	--resalah-font-base: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--resalah-fs-xs: 13px;
	--resalah-fs-sm: 14px;
	--resalah-fs-base: 15px;
	--resalah-fs-md: 16px;
	--resalah-fs-lg: 20px;
	--resalah-fs-xl: 28px;

	/* Spacing scale */
	--resalah-space-1: 4px;
	--resalah-space-2: 8px;
	--resalah-space-3: 12px;
	--resalah-space-4: 16px;
	--resalah-space-5: 24px;
	--resalah-space-6: 32px;
	--resalah-space-7: 48px;

	/* Radius, shadow, border */
	--resalah-radius-sm: 8px;
	--resalah-radius-md: 16px;
	--resalah-radius-pill: 50px;
	--resalah-shadow-card: 0 2px 16px rgba(15, 23, 42, .05);
	--resalah-border-width: 1px;

	/* Breakpoints — documented here for consistency; media queries must
	   still hard-code these px values (CSS custom properties are not
	   readable inside @media), matching the legacy mu-plugin breakpoints. */
	--resalah-bp-tablet: 900px;
	--resalah-bp-mobile: 480px;
}