/* ==========================================================================
   Egittosì — Design tokens
   Deep Nile blue · clean white · soft sand / light gold · warm ivory · stone
   Every component reads from these variables. Do not hard-code colours.
   ========================================================================== */

:root {
	/* Nile blues (primary) */
	--c-nile-950: #081628;
	--c-nile-900: #0b1f3a; /* logo navy, headings, primary buttons */
	--c-nile-800: #112a4d;
	--c-nile-700: #17385f; /* deep Nile blue */
	--c-nile-600: #1f4a7c;
	--c-nile-500: #2b5f9a; /* interactive / focus blue */
	--c-nile-300: #8fb0d3;
	--c-nile-100: #e5edf6;
	--c-nile-50: #f2f6fb;

	/* Sand / light gold (accent — use sparingly) */
	--c-gold-800: #6f4d17; /* gold text on light backgrounds (AA) */
	--c-gold-700: #8a6122; /* eyebrow text on ivory (AA large / UI) */
	--c-gold-600: #a8782e;
	--c-gold-500: #c9a15a; /* primary accent: rules, icons, active states */
	--c-gold-400: #d7b777;
	--c-gold-300: #e6cf9f;
	--c-sand-200: #efe3cb;
	--c-sand-100: #f5ecdb;

	/* Neutrals */
	--c-white: #ffffff;
	--c-ivory: #fbf8f2; /* page background */
	--c-ivory-2: #f5efe4; /* alternate section background */
	--c-stone-600: #6e685e; /* muted text */
	--c-stone-500: #8c8577;
	--c-stone-300: #cfc7b8; /* borders on ivory */
	--c-stone-200: #e4ddd0; /* hairlines */
	--c-ink: #0e1b2e; /* body text */
	--c-ink-soft: #3d4a5c; /* secondary text */

	/* Tricolore — only for the tiny Italian accents of the brand */
	--c-it-green: #1f8a4c;
	--c-it-red: #c8322f;

	/* WhatsApp (accessible deep green, white text passes AA) */
	--c-whatsapp: #128c4b;
	--c-whatsapp-hover: #0e7a41;

	/* Semantic */
	--c-bg: var(--c-ivory);
	--c-surface: var(--c-white);
	--c-text: var(--c-ink);
	--c-text-soft: var(--c-ink-soft);
	--c-text-muted: var(--c-stone-600);
	--c-heading: var(--c-nile-900);
	--c-border: var(--c-stone-200);
	--c-border-strong: var(--c-stone-300);
	--c-accent: var(--c-gold-500);
	--c-link: var(--c-nile-700);
	--c-focus: var(--c-nile-500);
	--c-error: #b3261e;
	--c-success: #1f7a4d;

	/* Typography */
	--font-display: "Cormorant Garamond", "Cormorant", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--font-sans: "Jost", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;

	--fs-hero: clamp(2.75rem, 1.6rem + 5.2vw, 7rem);
	--fs-display: clamp(2.5rem, 1.7rem + 3.6vw, 5.25rem);
	--fs-h1: clamp(2.25rem, 1.6rem + 2.9vw, 4.5rem);
	--fs-h2: clamp(2rem, 1.5rem + 2.1vw, 3.5rem);
	--fs-h3: clamp(1.5rem, 1.3rem + 0.85vw, 2.125rem);
	--fs-h4: clamp(1.25rem, 1.18rem + 0.3vw, 1.5rem);
	--fs-lead: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
	--fs-body: 1.0625rem; /* 17px */
	--fs-small: 0.9375rem;
	--fs-xs: 0.8125rem;
	--fs-eyebrow: 0.75rem;
	--fs-button: 0.8125rem;

	--lh-tight: 1.02;
	--lh-heading: 1.1;
	--lh-snug: 1.3;
	--lh-body: 1.7;

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;

	--tracking-eyebrow: 0.24em;
	--tracking-button: 0.14em;
	--tracking-caps: 0.08em;
	--tracking-display: -0.015em;

	/* Spacing (4px base) */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 6rem;
	--space-10: 8rem;
	--section-y: clamp(4rem, 2.5rem + 4.5vw, 7rem);
	--section-y-sm: clamp(2.75rem, 2rem + 3vw, 4.5rem);

	/* Layout */
	--container: 1320px;
	--container-wide: 1560px;
	--container-narrow: 820px;
	--gutter: clamp(1.25rem, 0.6rem + 2.8vw, 3rem);
	--header-h: 84px;
	--header-h-compact: 68px;

	/* Shape */
	--radius-xs: 2px;
	--radius-sm: 4px;
	--radius: 8px;
	--radius-lg: 14px;
	--radius-pill: 999px;

	/* Elevation — soft, navy-tinted */
	--shadow-xs: 0 1px 2px rgba(11, 31, 58, 0.06);
	--shadow-sm: 0 1px 2px rgba(11, 31, 58, 0.05), 0 4px 14px -6px rgba(11, 31, 58, 0.12);
	--shadow: 0 18px 40px -22px rgba(11, 31, 58, 0.28), 0 2px 6px rgba(11, 31, 58, 0.04);
	--shadow-lg: 0 40px 90px -40px rgba(11, 31, 58, 0.45), 0 6px 18px -10px rgba(11, 31, 58, 0.14);

	/* Motion */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--ease-soft: cubic-bezier(0.25, 0.1, 0.25, 1);
	--dur-micro: 250ms;
	--dur-ui: 400ms;
	--dur-hover: 500ms;
	--dur-reveal: 900ms;
	--dur-cinematic: 1400ms;

	/* Layers */
	--z-base: 1;
	--z-raised: 10;
	--z-sticky: 50;
	--z-header: 100;
	--z-mobile-nav: 150;
	--z-dialog: 900;
	--z-cursor: 1000;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-micro: 1ms;
		--dur-ui: 1ms;
		--dur-hover: 1ms;
		--dur-reveal: 1ms;
		--dur-cinematic: 1ms;
	}
}