/**
 * Manifest - Surface-Scoped Token Architecture
 * Strict Pairing: Every section/band/card declares a surface; children only use token pairs.
 * Only tokens.css may contain raw hex values.
 */
:root {
	/* Engineered Editorial Master Tokens */
	--base: #FFFFFF;
	--surface: #F8FAFC;
	--surface-warm: #FFF7F2;
	--ink: #0B192C;
	--accent: #FF6B00;
	--accent-hover: #E05A00;
	--accent-light: #FFF0E6;
	--accent-glow: rgba(255, 107, 0, 0.35);
	--navy: #0B192C;
	--navy-light: #1E3A8A;
	--tech-blue: #0284C7;
	--tech-blue-glow: rgba(2, 132, 199, 0.3);
	--line: #E2E8F0;

	/* Core Palette Variables & Fallbacks */
	--paper: var(--base);
	--soft: var(--surface);
	--accent-ink: #0B192C;

	/* Semantic Status Colors (Strictly for Tracking & Alerts) */
	--ok: #10B981;
	--warn: #F59E0B;
	--danger: #EF4444;
	--focus: #FF6B00;
	--whatsapp: #25D366;

	/* Default Surface Pair Fallbacks on Root (Light Default) */
	--bg: var(--base);
	--on: var(--ink);
	--on-muted: #64748B;
	--card: #FFFFFF;
	--card-tinted: #F1F5F9;
	--on-card: var(--ink);
	--field: #FFFFFF;
	--on-field: var(--ink);

	/* Compatibility & Surface Aliases */
	--hairline: var(--line);
	--bronze: var(--accent);
	--surface-soft: var(--card-tinted);
	--text-main: var(--on);
	--text-muted: var(--on-muted);

	/* Dimensions & Spatial Grid */
	--container-max: 1320px;
	--grid-max: 1320px;
	--section-px: clamp(16px, 3.5vw, 32px);
	--header-h: 80px;
	--utility-h: 40px;
	--section-py-desktop: 96px;
	--section-py-mobile: 64px;
	--gutter: clamp(1rem, 4vw, 3rem);
	--space-section: clamp(4.5rem, 10vw, 10rem);

	/* Corner Radii */
	--radius: 16px;
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--radius-full: 9999px;

	/* Typography Tokens */
	--font-ar: Tajawal, 'IBM Plex Sans Arabic', system-ui, sans-serif;
	--font-display-ar: 'Noto Kufi Arabic', 'Cairo', sans-serif;
	--font-display-lat: 'Inter Tight', sans-serif;
	--font-body-ar: var(--font-ar);
	--font-mono: ui-monospace, Menlo, Consolas, monospace;

	--fs-hero: clamp(2.5rem, 1.2rem + 6vw, 6.5rem);
	--fs-h2: clamp(1.75rem, 1rem + 3vw, 3.25rem);
	--fs-body: clamp(1rem, .95rem + .2vw, 1.125rem);

	/* Transitions & Motion */
	--dur-fast: .28s;
	--dur-base: .7s;
	--dur-slow: 1.1s;
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--ease-inout: cubic-bezier(.65, 0, .35, 1);
	--ease-manifest: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Accessibility: Focus-Visible standard */
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* Editorial Monospace Labels */
.label {
	font-family: var(--font-mono);
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Page View Transitions */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .3s var(--ease-out) both vt-out; }
::view-transition-new(root) { animation: .3s var(--ease-out) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* Strict Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	html.js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   SURFACE DEFINITIONS
   ========================================================================== */

/* Light Surface (Pure White Base) */
[data-surface="light"] {
	--bg: #FFFFFF;
	--on: #0B192C;
	--on-muted: #64748B;
	--card: #FFFFFF;
	--card-tinted: #F8FAFC;
	--on-card: #0B192C;
	--line: #E2E8F0;
	--field: #FFFFFF;
	--on-field: #0B192C;
}

/* Soft Surface (Modern Crisp Slate) */
[data-surface="soft"] {
	--bg: #F8FAFC;
	--on: #0B192C;
	--on-muted: #64748B;
	--card: #FFFFFF;
	--card-tinted: #F1F5F9;
	--on-card: #0B192C;
	--line: #E2E8F0;
	--field: #FFFFFF;
	--on-field: #0B192C;
}

/* Warm Surface (Vibrant Cargo Tint - Inspired by 2BS Cargo) */
[data-surface="warm"] {
	--bg: #FFF7F2;
	--on: #0B192C;
	--on-muted: #64748B;
	--card: #FFFFFF;
	--card-tinted: #FFF0E6;
	--on-card: #0B192C;
	--line: #FFE2D1;
	--field: #FFFFFF;
	--on-field: #0B192C;
}

/* Dark Surface (High-Trust Deep Midnight Marine / Hero / Footer) */
[data-surface="dark"] {
	--bg: #0B1524;
	--on: #F8FAFC;
	--on-muted: #94A3B8;
	--card: #132238;
	--card-tinted: #1A2D4A;
	--on-card: #F8FAFC;
	--line: rgba(255, 255, 255, 0.12);
	--field: #070E18;
	--on-field: #F8FAFC;
}

/* Universal Surface Application */
[data-surface] {
	background-color: var(--bg);
	color: var(--on);
}