/*
 * Expo System design tokens (spec Appendix A). Brand: Deep Navy #11162A, Elegant Gold #C29538.
 * Components never hard-code a colour: they use these custom properties.
 * Source: assets/scss/_tokens.scss (this file is the hand-maintained compiled equivalent; no build step needed).
 */
:root {
	/* Brand */
	--exs-navy: #11162A;
	--exs-navy-900: #0B0F1E;
	--exs-navy-700: #1D2440;
	--exs-navy-500: #2A3355;
	--exs-gold: #C29538;
	--exs-gold-hover: #B08430;
	--exs-gold-ink: #8A6A22; /* gold-toned text on light surfaces (≈5.0:1 on white) */
	--exs-gold-soft: #F6EEDC; /* tinted backgrounds, never text */
	--exs-gold-ink-strong: #6F5419; /* gold-toned text on gold-soft (≈6.6:1) */
	--exs-white: #FFFFFF;
	--exs-gray-50: #F8F9FA;
	--exs-gray-100: #F3F4F6;
	--exs-gray-200: #E5E7EB;
	--exs-gray-300: #D1D5DB;
	--exs-gray-600: #4B5563;

	/* Semantic */
	--exs-surface: var(--exs-white);
	--exs-surface-alt: var(--exs-gray-50);
	--exs-surface-section: var(--exs-gray-100);
	--exs-surface-raised: var(--exs-white);
	--exs-text: var(--exs-navy);
	--exs-text-muted: var(--exs-gray-600);
	--exs-border: var(--exs-gray-300);
	--exs-border-soft: var(--exs-gray-200);
	--exs-accent: var(--exs-gold);
	--exs-accent-ink: var(--exs-gold-ink);
	--exs-accent-soft: var(--exs-gold-soft);
	--exs-on-accent: var(--exs-navy); /* labels on gold buttons */
	--exs-header-bg: var(--exs-white);
	--exs-footer-bg: var(--exs-navy);
	--exs-footer-text: #E5E7EB;
	--exs-success: #1E7B4F;
	--exs-success-soft: #E7F4EC;
	--exs-warning: #9A6700;
	--exs-warning-soft: #FDF3DA;
	--exs-warning-ink: #7A5400; /* warning text on warning-soft (≈6.4:1); --exs-warning stays for icons/borders */
	--exs-danger: #B42318;
	--exs-danger-soft: #FDECEA;
	--exs-info: #1D4ED8;
	--exs-info-soft: #E8EFFD;
	--exs-focus: 0 0 0 2px var(--exs-navy), 0 0 0 4px var(--exs-gold);

	/* Typography */
	--exs-font-display-en: "Cinzel", "Playfair Display", Georgia, serif;
	--exs-font-heading-en: "Playfair Display", Georgia, serif;
	--exs-font-body-en: "Inter", system-ui, "Segoe UI", Tahoma, Arial, sans-serif;
	--exs-font-heading-ar: "Cairo", "Amiri", Tahoma, Arial, sans-serif;
	--exs-font-heading-ar-classic: "Amiri", "Cairo", Tahoma, Arial, serif;
	--exs-font-body-ar: "Tajawal", "Cairo", system-ui, Tahoma, Arial, sans-serif;
	--exs-font-display: var(--exs-font-display-en);
	--exs-font-heading: var(--exs-font-heading-en);
	--exs-font-body: var(--exs-font-body-en);
	--exs-lh-body: 1.6;
	--exs-lh-heading: 1.25;

	/* Spacing, radius, elevation, motion */
	--exs-1: 4px; --exs-2: 8px; --exs-3: 12px; --exs-4: 16px;
	--exs-5: 24px; --exs-6: 32px; --exs-7: 48px; --exs-8: 64px;
	--exs-radius-sm: 4px; --exs-radius: 8px; --exs-radius-lg: 14px; --exs-radius-pill: 999px;
	--exs-shadow-1: 0 1px 2px rgba(17, 22, 42, .08), 0 1px 3px rgba(17, 22, 42, .06);
	--exs-shadow-2: 0 4px 12px rgba(17, 22, 42, .10);
	--exs-shadow-3: 0 12px 32px rgba(17, 22, 42, .16);
	--exs-ease: cubic-bezier(.2, .8, .2, 1);
	--exs-dur: 200ms;
	--exs-touch: 44px;
	--exs-container: 1200px;

	/* Booth states (colour + pattern; never colour alone) */
	--exs-booth-available: #E7F4EC;
	--exs-booth-available-stroke: #1E7B4F;
	--exs-booth-held: #FDF3DA;
	--exs-booth-held-stroke: #9A6700;
	--exs-booth-booked: #E5E7EB;
	--exs-booth-booked-stroke: #4B5563;
	--exs-booth-blocked: #FDECEA;
	--exs-booth-blocked-stroke: #B42318;
	--exs-booth-mine: #F6EEDC;
	--exs-booth-mine-stroke: #8A6A22;
	--exs-booth-selected: #11162A;
	color-scheme: light;
}

:root[lang="ar"] {
	--exs-font-display: var(--exs-font-heading-ar);
	--exs-font-heading: var(--exs-font-heading-ar);
	--exs-font-body: var(--exs-font-body-ar);
	--exs-lh-body: 1.8;
	--exs-lh-heading: 1.4;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--exs-surface: var(--exs-navy-900);
		--exs-surface-alt: var(--exs-navy);
		--exs-surface-section: var(--exs-navy-700);
		--exs-surface-raised: #161C34;
		--exs-text: #F3F4F6;
		--exs-text-muted: #C7CBD4;
		--exs-border: #2A3355;
		--exs-border-soft: #232A47;
		--exs-accent-ink: var(--exs-gold); /* gold passes on navy */
		--exs-accent-soft: #2A2614;
		--exs-header-bg: var(--exs-navy-900);
		--exs-footer-bg: #070A14;
		--exs-success: #5CC796;
		--exs-success-soft: #0F2A1E;
		--exs-warning: #E8B44A;
		--exs-warning-soft: #2E2410;
		--exs-warning-ink: #E8B44A;
		--exs-gold-ink-strong: var(--exs-gold);
		--exs-danger: #F2877E;
		--exs-danger-soft: #3A1512;
		--exs-info: #8DB0FF;
		--exs-info-soft: #14203F;
		--exs-focus: 0 0 0 2px var(--exs-gold), 0 0 0 4px var(--exs-navy-900);
		--exs-booth-available: #123526;
		--exs-booth-available-stroke: #5CC796;
		--exs-booth-held: #3A2E10;
		--exs-booth-held-stroke: #E8B44A;
		--exs-booth-booked: #262C45;
		--exs-booth-booked-stroke: #9AA1B5;
		--exs-booth-blocked: #3A1512;
		--exs-booth-blocked-stroke: #F2877E;
		--exs-booth-mine: #3A3214;
		--exs-booth-mine-stroke: #C29538;
		--exs-booth-selected: #C29538;
		color-scheme: dark;
	}
}
:root[data-theme="dark"] {
	--exs-surface: var(--exs-navy-900);
	--exs-surface-alt: var(--exs-navy);
	--exs-surface-section: var(--exs-navy-700);
	--exs-surface-raised: #161C34;
	--exs-text: #F3F4F6;
	--exs-text-muted: #C7CBD4;
	--exs-border: #2A3355;
	--exs-border-soft: #232A47;
	--exs-accent-ink: var(--exs-gold);
	--exs-accent-soft: #2A2614;
	--exs-header-bg: var(--exs-navy-900);
	--exs-footer-bg: #070A14;
	--exs-success: #5CC796;
	--exs-success-soft: #0F2A1E;
	--exs-warning: #E8B44A;
	--exs-warning-soft: #2E2410;
	--exs-warning-ink: #E8B44A;
	--exs-gold-ink-strong: var(--exs-gold);
	--exs-danger: #F2877E;
	--exs-danger-soft: #3A1512;
	--exs-info: #8DB0FF;
	--exs-info-soft: #14203F;
	--exs-focus: 0 0 0 2px var(--exs-gold), 0 0 0 4px var(--exs-navy-900);
	--exs-booth-available: #123526;
	--exs-booth-available-stroke: #5CC796;
	--exs-booth-held: #3A2E10;
	--exs-booth-held-stroke: #E8B44A;
	--exs-booth-booked: #262C45;
	--exs-booth-booked-stroke: #9AA1B5;
	--exs-booth-blocked: #3A1512;
	--exs-booth-blocked-stroke: #F2877E;
	--exs-booth-mine: #3A3214;
	--exs-booth-mine-stroke: #C29538;
	--exs-booth-selected: #C29538;
	color-scheme: dark;
}