/* ==========================================================================
   variables.css — toutes les CSS Custom Properties du thème Ombre.
   Modifier UNIQUEMENT ici pour changer la palette, la typographie ou l'échelle d'espacement.

   Palette actuelle : placeholder « tactical / military » en attendant le brand guide définitif.
   ========================================================================== */

:root {
	/* ---------------------------------------------------------- Couleurs */

	/* Surfaces */
	--color-bg: #0d0d0d;
	--color-surface: #161616;
	--color-surface-alt: #1f1f1f;

	/* Texte */
	--color-text: #ececec;
	--color-text-muted: #9a9a92;
	--color-text-inverse: #0d0d0d;

	/* Marque — palette tricolore française sur fond sombre */
	--color-primary: #1F71B8;        /* bleu France */
	--color-primary-dark: #155284;
	--color-primary-light: #4990cf;
	--color-primary-rgb: 31, 113, 184;

	/* Accent principal (CTA, hover, focus, liens) = bleu France */
	--color-accent: #1F71B8;
	--color-accent-dark: #155284;
	--color-accent-light: #4990cf;
	--color-accent-rgb: 31, 113, 184;

	/* Accent secondaire (highlights, Made in France, badges) = rouge France */
	--color-accent-2: #E30613;
	--color-accent-2-dark: #b00410;
	--color-accent-2-light: #ff2734;
	--color-accent-2-rgb: 227, 6, 19;

	/* Bordures & séparateurs */
	--color-border: #2a2a2a;
	--color-border-strong: #3d3d3d;

	/* États */
	--color-success: #3d6b3d;
	--color-danger: #E30613;
	--color-warning: #c08c2e;

	/* Overlays */
	--overlay-dark: rgba(13, 13, 13, 0.6);
	--overlay-darker: rgba(13, 13, 13, 0.85);

	/* ---------------------------------------------------------- Typographie */

	--font-sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--font-display: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

	/* Roboto fournit 300, 400, 500, 700. Pour des accents « semibold », utiliser 500 ou 700. */
	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 500;
	--fw-bold: 700;

	/* Échelle de tailles (clamp pour fluid type) */
	--fs-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
	--fs-sm: clamp(0.875rem, 0.8rem + 0.3vw, 0.9375rem);
	--fs-base: clamp(1rem, 0.95rem + 0.3vw, 1.0625rem);
	--fs-lg: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
	--fs-xl: clamp(1.375rem, 1.2rem + 0.7vw, 1.5625rem);
	--fs-2xl: clamp(1.75rem, 1.4rem + 1.2vw, 2.125rem);
	--fs-3xl: clamp(2.25rem, 1.7rem + 2vw, 3rem);
	--fs-4xl: clamp(2.75rem, 2rem + 3vw, 4rem);
	--fs-5xl: clamp(3.5rem, 2.5rem + 4vw, 5.5rem);

	--lh-tight: 1.15;
	--lh-snug: 1.3;
	--lh-base: 1.55;
	--lh-relaxed: 1.7;

	--ls-tight: -0.02em;
	--ls-normal: 0;
	--ls-wide: 0.05em;
	--ls-widest: 0.15em;

	/* ---------------------------------------------------------- Espacement (échelle 4-pt) */

	--space-3xs: 0.25rem;   /*  4px */
	--space-2xs: 0.5rem;    /*  8px */
	--space-xs: 0.75rem;    /* 12px */
	--space-sm: 1rem;       /* 16px */
	--space-md: 1.5rem;     /* 24px */
	--space-lg: 2rem;       /* 32px */
	--space-xl: 3rem;       /* 48px */
	--space-2xl: 4.5rem;    /* 72px */
	--space-3xl: 6rem;      /* 96px */
	--space-4xl: 9rem;      /* 144px */

	/* ---------------------------------------------------------- Conteneurs */

	--container-max: 1280px;
	--container-narrow: 960px;
	--container-wide: 1440px;
	--container-padding: var(--space-md);

	/* ---------------------------------------------------------- Rayons */

	--radius-none: 0;
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-lg: 8px;
	--radius-pill: 9999px;

	/* ---------------------------------------------------------- Ombres */

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
	--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
	--shadow-header: 0 2px 16px rgba(0, 0, 0, 0.5);

	/* ---------------------------------------------------------- Transitions */

	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--duration-fast: 150ms;
	--duration-base: 250ms;
	--duration-slow: 450ms;

	/* ---------------------------------------------------------- Z-index scale */

	--z-base: 1;
	--z-sticky: 100;
	--z-header: 200;
	--z-overlay: 800;
	--z-modal: 900;
	--z-toast: 1000;

	/* ---------------------------------------------------------- Layout chrome */

	--header-height: 80px;
	--header-height-scrolled: 60px;
}