/* Comanda Mall design tokens. Every color, font and motion value lives here. */
:root {
	--navy-900: #070D1F;
	--navy-800: #0B132B;
	--navy-700: #16204A;
	--navy-500: #3D456F;
	--gold-300: #E3C27A;
	--gold-500: #C9A24A;
	--gold-700: #9A7A2E;
	--gold-text: #7A5F22; /* gold for text: AA 4.5:1 on ivory, ivory-100 and white (gold-700 is icons/large only) */
	--gold-metal: linear-gradient(135deg, var(--gold-300) 0%, var(--gold-500) 50%, var(--gold-700) 100%);
	--ivory-50: #FBF8F1;
	--ivory-100: #F3ECDD;
	--line: #E6DCC4;
	--ink: #0B132B;
	--ink-muted: #5A6185;
	--on-navy: #F5F1E8;
	--on-navy-muted: #AEB3C8;
	--success: #2F6B4F;
	--error: #8A2432;
	--warning: #8A5A12;

	--font-display: 'Playfair Display', 'Cairo', Georgia, serif;
	--font-body: 'Montserrat', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--radius-sm: 2px;
	--radius: 4px;
	--shadow: 0 8px 24px rgb(11 19 43 / .08);
	--shadow-lg: 0 18px 48px rgb(11 19 43 / .18);

	--container: 1280px;
	--gutter: clamp(1rem, 3vw, 2rem);
	--header-h: 76px;

	--ease: cubic-bezier(.2, .7, .2, 1);
	--dur: 200ms;
	--focus: 0 0 0 2px var(--ivory-50), 0 0 0 4px var(--gold-500);
	--marble: url(../img/marble-navy.svg);
}

:lang(ar) {
	--font-display: 'Cairo', Georgia, serif;
	--font-body: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.no-marble {
	--marble: none;
}