/**
 * Mesle Aval locked design tokens.
 * Source: approved design-system board and normalized design-system contract.
 */

:root {
	color-scheme: light;

	--color-deep-navy: #0a1021;
	--color-navy: #14203a;
	--color-teal-primary: #00b8a9;
	--color-teal-light: #7fe9dc;
	--color-mint-tint: #e6fbf7;
	--color-white: #ffffff;
	--color-gray-50: #f7f8fa;
	--color-gray-100: #eef2f5;
	--color-gray-300: #d1d8e0;
	--color-gray-600: #5b6470;

	--color-success: #22c55e;
	--color-warning: #f59e0b;
	--color-error: #ef4444;
	--color-info: #3b82f6;
	--color-neutral: #64748b;
	--brand-gradient: linear-gradient(90deg, #00b8a9 0%, #14203a 100%);

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;

	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-card: 16px;
	--radius-lg: 20px;
	--radius-xl: 24px;
	--radius-pill: 999px;

	--border-default: 1px solid #d1d8e0;
	--border-soft: 1px solid #eef2f5;
	--shadow-1: 0 2px 8px rgb(20 32 58 / 4%);
	--shadow-2: 0 8px 24px rgb(20 32 58 / 7%);
	--shadow-3: 0 16px 40px rgb(20 32 58 / 10%);
	--focus-ring: 0 0 0 3px rgb(0 184 169 / 18%);

	--motion-fast: 150ms;
	--motion-base: 250ms;
	--motion-slow: 350ms;
	--motion-easing: cubic-bezier(.2, 0, 0, 1);

	--z-base: 0;
	--z-dropdown: 10;
	--z-sticky: 100;
	--z-modal: 1000;
	--z-critical: 10000;

	--layout-content-max: 1320px;
	--layout-gutter: 24px;
	--page-padding-inline: 16px;
	--tap-target-min: 44px;
}