/*
 * Alhareeq Club design system.
 *
 * Change site colors, typography, spacing, radii, and motion here only.
 * Page styles must consume these tokens and must not duplicate raw values.
 */

:root {
	/* Official brand palette. */
	--ahr-color-orange: #f36b31;
	--ahr-color-yellow: #fdc20f;
	--ahr-color-gray: #9b9b9b;
	--ahr-color-charcoal: #434345;
	--ahr-color-white: #ffffff;
	--ahr-color-black: #0a0a0a;

	/* Semantic colors. */
	--ahr-color-action: var(--ahr-color-orange);
	--ahr-color-action-hover: var(--ahr-color-orange);
	--ahr-color-accent: var(--ahr-color-yellow);
	--ahr-color-text: var(--ahr-color-charcoal);
	--ahr-color-text-muted: var(--ahr-color-gray);
	--ahr-color-surface: var(--ahr-color-white);
	--ahr-color-surface-dark: var(--ahr-color-black);
	--ahr-color-surface-card: #1a1a1a;
	--ahr-color-surface-media: #2a2a2a;
	--ahr-color-border: rgb(253 194 15 / 20%);
	--ahr-color-border-subtle: rgb(255 255 255 / 7%);
	--ahr-color-overlay: rgb(10 10 10 / 58%);
	--ahr-color-text-subtle: #717171;

	/* Typography. */
	--ahr-font-heading: "29LT Bukra Wide", sans-serif;
	--ahr-font-body: "Graphik Arabic", sans-serif;
	--ahr-font-weight-heading: 700;
	--ahr-font-weight-body: 400;

	/* Shared shape, spacing, and motion. */
	--ahr-radius-pill: 999px;
	--ahr-transition-fast: 200ms ease;
	--ahr-transition-card: 350ms ease;
	--ahr-card-lift: -6px;
	--ahr-card-shadow-hover:
		0 20px 50px rgb(253 194 15 / 14%),
		0 8px 20px rgb(0 0 0 / 50%);
	--ahr-content-width: 1280px;

	/* Keep Flatsome components aligned with the same system. */
	--primary-color: var(--ahr-color-action);
	--fs-color-primary: var(--ahr-color-action);
	--fs-color-secondary: var(--ahr-color-accent);
	--fs-color-base: var(--ahr-color-charcoal);
	--fs-experimental-link-color: var(--ahr-color-action);
	--fs-experimental-link-color-hover: var(--ahr-color-action-hover);
}