/*
 * happyresto · Design Tokens
 * Base structurelle : Welia Brandkit v1.0
 * Valeurs : happyresto brand (primary #0066FF, amber #F59E0B, ink #1B252F).
 */

:root {
	/* Couleurs — Fond & surfaces
	   --bg : fond principal de page (clair)
	   --surface : surface neutre légèrement contrastée pour les cards */
	--bg: #FFFFFF;
	--surface: #F7F7F5;
	--surface-2: #F2F2F0;

	/* Couleurs — Texte */
	--text-1: #1B252F;
	--text-2: #475569;
	--text-3: #64748B;
	--text-inverse: #FFFFFF;

	/* Couleurs — Accents */
	--accent-1: #0066FF;
	--accent-1-hover: #0052CC;
	--accent-1-soft: rgba(0, 102, 255, 0.08);
	--accent-2: #D97706;
	--accent-2-soft: rgba(217, 119, 6, 0.12);

	/* Couleurs — Bordures */
	--border-subtle: rgba(27, 37, 47, 0.06);
	--border-default: rgba(27, 37, 47, 0.12);
	--border-strong: rgba(27, 37, 47, 0.20);

	/* Couleurs — Sémantique */
	--success: #10B981;
	--warning: #B8865B;
	--error: #A04A4A;

	/* Couleurs — Canal WhatsApp (bouton de contact, exception au palette de marque) */
	--whatsapp: #25D366;
	--whatsapp-hover: #1EBE5D;

	/* Typographie — Familles */
	--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-serif: "Outfit", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-display-italic: "Outfit", "Inter", Georgia, serif;
	--font-mono: "JetBrains Mono", "Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace;

	/* Typographie — Échelle fluide
	   Calibrée pour les restaurateurs (lecture rapide, contraste fort)
	   sur écran 1920px+. Body 18px, micros sortent du palier 12-13px illisible. */
	--text-xs: 14px;
	--text-sm: 15px;
	--text-base: 18px;
	--text-md: 20px;
	--text-lg: 22px;
	--text-xl: clamp(24px, 1.8vw, 32px);
	--text-2xl: clamp(30px, 2.4vw, 42px);
	--text-3xl: clamp(40px, 3.4vw, 56px);
	--text-4xl: clamp(48px, 4.6vw, 76px);
	--text-5xl: clamp(60px, 6vw, 112px);

	/* Letter spacing */
	--ls-tight: -0.015em;
	--ls-snug: -0.008em;
	--ls-normal: 0;
	--ls-wide: 0.04em;
	--ls-meta: 0.1em;
	--ls-widest: 0.18em; /* Réservé aux mono uppercase courts (≤ 4 caractères type CHF, GMB) */

	/* Line height */
	--lh-tight: 1.05;
	--lh-snug: 1.2;
	--lh-normal: 1.6;
	--lh-relaxed: 1.7;
	--lh-loose: 1.85;

	/* Espacements (base 4px) */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 120px;
	--space-11: 160px;

	/* Section padding fluide */
	--section-py: clamp(64px, 9vw, 120px);

	/* Radii */
	--radius-xs: 2px;
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 12px;
	--radius-xl: 20px;
	--radius-pill: 999px;

	/* Ombres */
	--shadow-xs: 0 1px 2px rgba(27, 37, 47, 0.04);
	--shadow-sm: 0 1px 4px rgba(27, 37, 47, 0.08);
	--shadow-md: 0 6px 16px -8px rgba(27, 37, 47, 0.18);
	--shadow-lg: 0 30px 60px -30px rgba(27, 37, 47, 0.25), 0 10px 20px -15px rgba(27, 37, 47, 0.15);
	--shadow-focus: 0 0 0 4px rgba(0, 102, 255, 0.30);

	/* Container */
	--container-max: 1280px;
	--container-narrow: 880px;
	--container-pad: clamp(20px, 4vw, 48px);

	/* Animation */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur-fast: 180ms;
	--dur: 320ms;
	--dur-slow: 560ms;

	/* Layout */
	--header-h: 76px;
	--nav-blur: saturate(160%) blur(14px);

	/* Breakpoints canoniques
	   --bp-sm  : 480px (smartphone)
	   --bp-md  : 640px (tablette portrait)
	   --bp-lg  : 900px (tablette paysage → desktop)
	   --bp-xl  : 1024px (desktop wide)
	   --bp-nav : 980px (nav hamburger trigger — aligné sur le seuil où les items du menu + brand + CTA débordent) */
}

@media (max-width: 980px) {
	:root {
		--header-h: 64px;
		--section-py: clamp(56px, 12vw, 88px);
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-fast: 0ms;
		--dur: 0ms;
		--dur-slow: 0ms;
	}
}