/**
 * FCC Light Design System — tokens (single source of truth for hex).
 * Change brand color here only; layers + PHP lock use var() aliases.
 */

:root {
	/* Neutrals — design.md */
	--color-background: #F5F6F7;
	--color-surface: #FFFFFF;
	--color-section-soft: #F9FAFB;
	--color-text-primary: #111418;
	--color-text-secondary: #555B63;
	--color-border: #D9DDE2;

	/* Brand — FCC blue */
	--color-accent: #004A98;
	--color-accent-hover: #003B7A;
	--color-accent-deep: #002D61;
	--color-accent-light: #EAF2FA;
	--color-accent-muted: color-mix(in srgb, var(--color-accent) 15%, transparent);
	--color-on-accent: #ffffff;

	/* Semantic alias (same blue family) */
	--color-performance: var(--color-accent);

	/* Legacy aliases */
	--color-bg: var(--color-background);
	--color-card: var(--color-section-soft);
	--color-white: var(--color-surface);
	--color-gray: var(--color-text-secondary);

	/* Typography — Be Vietnam Pro */
	--font-main: "Be Vietnam Pro", "Helvetica Neue", Arial, sans-serif;

	/* Layout */
	--container-width: 1440px;
	--grid-columns: 12;

	--space-xs: 8px;
	--space-sm: 16px;
	--space-md: 32px;
	--space-lg: 64px;
	--space-xl: 120px;
	--space-xxl: 160px;

	/* Buttons */
	--button-min-height: 44px;
	--button-padding-y: 10px;
	--button-padding-x: 20px;
	--button-font-size: 14px;

	/* Radius */
	--radius-button: 4px;
	--radius-small: 4px;
	--radius-medium: 8px;

	/* Motion */
	--transition-fast: 400ms;
	--transition-smooth: 700ms;
	--transition-slow: 800ms;

	/* Flatsome / Woo shared tokens */
	--primary-color: var(--color-accent);
	--fs-color-primary: var(--color-accent);
	--fs-color-secondary: var(--color-section-soft);
	--fs-color-success: var(--color-text-primary);
	--fs-color-alert: var(--color-accent);
	--fs-color-base: var(--color-text-secondary);
	--fs-experimental-link-color: var(--color-accent);
	--fs-experimental-link-color-hover: var(--color-text-primary);
}