/* =========================================================================
   ATLAS AMC — design tokens
   Dark is the reference palette (matches the design). Light is derived.
   The color theme is selected by [data-theme] on <html> (set before paint).
   ========================================================================= */

:root {
	/* Brand / accent — constant across themes (sampled from the design ~#E85800–#F06000) */
	--accent:        #f05a00;
	--accent-hover:  #d65100;
	--accent-press:  #b94500;
	--accent-ink:    #ffffff;
	--accent-tint:   rgba(240, 90, 0, 0.12);
	--accent-tint-2: rgba(240, 90, 0, 0.20);

	/* "Ink" tokens: always-dark surfaces for photographic / hero / CTA bands.
	   These do NOT change with the light/dark toggle so image sections keep
	   their dramatic treatment and white text stays legible. */
	--ink-bg:          #0b0b0c;
	--ink-surface:     #151517;
	--ink-surface-2:   #1d1d20;
	--ink-border:      rgba(255, 255, 255, 0.12);
	--ink-text:        #ffffff;
	--ink-text-muted:  #b7b7be;
	--ink-text-faint:  #8a8a91;
	--ink-scrim:       linear-gradient(90deg, rgba(8,8,9,0.92) 0%, rgba(8,8,9,0.72) 42%, rgba(8,8,9,0.25) 100%);

	/* Layout */
	--container:      1680px;   /* every section aligns to this width */
	--container-wide: 1680px;
	--gutter:         clamp(18px, 3.4vw, 52px);
	--section-y:      clamp(56px, 8vw, 108px);

	--radius-xs: 8px;
	--radius-sm: 10px;
	--radius:    14px;
	--radius-lg: 22px;
	--radius-pill: 999px;

	/* Typography */
	--font-head: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

	--fs-eyebrow: clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem);
	--fs-h1:      clamp(2.35rem, 1.6rem + 3.4vw, 4rem);   /* 36 → 64 */
	--fs-h2:      clamp(1.85rem, 1.4rem + 1.9vw, 2.5rem); /* ~30 → 40 */
	--fs-h3:      clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
	--fs-lead:    clamp(1rem, 0.95rem + 0.35vw, 1.18rem);
	--fs-body:    1rem;
	--fs-sm:      0.9rem;
	--fs-caption: 0.8rem;
	--fs-btn:     0.86rem;

	--lh-tight: 1.07;
	--lh-head:  1.15;
	--lh-body:  1.6;

	--tracking-eyebrow: 0.14em;
	--tracking-btn:     0.06em;

	/* Motion */
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--dur:  0.28s;

	--header-h: 88px;
}

/* ---------- Light theme (default when no JS / prefers light) ---------- */
:root,
:root[data-theme="light"] {
	color-scheme: light;

	--bg:          #ffffff;
	--bg-alt:      #f3f3f4;
	--surface:     #ffffff;
	--surface-2:   #f6f6f7;
	--surface-3:   #ececee;
	--border:      rgba(17, 17, 20, 0.10);
	--border-strong: rgba(17, 17, 20, 0.18);

	--text:        #17171b;
	--text-muted:  #5b5b62;
	--text-faint:  #86868d;
	--text-invert: #ffffff;

	--shadow-sm: 0 1px 2px rgba(16, 16, 20, 0.06);
	--shadow:    0 2px 8px rgba(16, 16, 20, 0.06), 0 18px 40px rgba(16, 16, 20, 0.08);

	--card-bg:     #ffffff;
	--card-border: rgba(17, 17, 20, 0.10);
}

/* ---------- Dark theme (reference palette from the design) ---------- */
:root[data-theme="dark"] {
	color-scheme: dark;

	--bg:          #0b0b0c;
	--bg-alt:      #000000;
	--surface:     #151517;
	--surface-2:   #1c1c1f;
	--surface-3:   #232327;
	--border:      rgba(255, 255, 255, 0.10);
	--border-strong: rgba(255, 255, 255, 0.20);

	--text:        #ffffff;
	--text-muted:  #b7b7be;
	--text-faint:  #85858c;
	--text-invert: #17171b;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
	--shadow:    0 2px 10px rgba(0, 0, 0, 0.45), 0 24px 60px rgba(0, 0, 0, 0.55);

	--card-bg:     #151517;
	--card-border: rgba(255, 255, 255, 0.10);
}

/* No-JS fallback: honor the OS preference. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;

		--bg:          #0b0b0c;
		--bg-alt:      #000000;
		--surface:     #151517;
		--surface-2:   #1c1c1f;
		--surface-3:   #232327;
		--border:      rgba(255, 255, 255, 0.10);
		--border-strong: rgba(255, 255, 255, 0.20);

		--text:        #ffffff;
		--text-muted:  #b7b7be;
		--text-faint:  #85858c;
		--text-invert: #17171b;

		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
		--shadow:    0 2px 10px rgba(0, 0, 0, 0.45), 0 24px 60px rgba(0, 0, 0, 0.55);

		--card-bg:     #151517;
		--card-border: rgba(255, 255, 255, 0.10);
	}
}

/* ---------- Arabic / RTL font stack ---------- */
[dir="rtl"] {
	--font-head: 'Cairo', 'Segoe UI', system-ui, sans-serif;
	--font-body: 'Cairo', 'Segoe UI', system-ui, sans-serif;
	--tracking-eyebrow: 0.06em;
	--tracking-btn: 0.02em;
}