/**
 * KNA Distribution — variables de design.
 *
 * Source : relevé de la maquette `maquette_kna_homepage/code.html`
 * (cf. PLAN-ARCHITECTURE-THEME-KNA.md, §1.3).
 *
 * Aucune règle de mise en page ici : uniquement des variables.
 */

:root {
	/* ---------------------------------------------------------------
	 * Couleurs — fonds sombres
	 * --------------------------------------------------------------- */
	--kna-color-dark: #070908;
	--kna-color-dark-header: #080b09;
	--kna-color-dark-elevated: #050706;
	--kna-color-dark-footer: #060d0b;
	--kna-color-overlay: rgba(7, 9, 8, 0.92);

	/* Couleurs — accent vert */
	--kna-color-accent: #9df758;
	--kna-color-accent-hover: #8de848;
	--kna-color-accent-soft: rgba(157, 247, 88, 0.2);

	/* Couleurs — verts de marque (boutons, badges) */
	--kna-color-brand: #0e5b32;
	--kna-color-brand-hover: #094224;
	--kna-color-link: #1e7245;
	--kna-color-link-hover: #15803d;

	/* Couleurs — surfaces claires */
	--kna-color-surface-light: #f7f8f9;
	--kna-color-card: #ffffff;
	--kna-color-card-border: #e8ebed;
	--kna-color-card-hover: #eaecee;
	--kna-color-muted-surface: #f1f3f5;

	/* Couleurs — badges */
	--kna-color-badge-new: #0e5b32;
	--kna-color-badge-best: #f25a00;
	--kna-color-badge-promo: #e60050;

	/* Couleurs — texte */
	--kna-color-text: #ffffff;
	--kna-color-text-strong: #111111;
	--kna-color-text-muted: #6b7280;
	--kna-color-text-subtle: #9ca3af;

	/* Couleurs — bordures sur fond sombre */
	--kna-color-border-dark: rgba(255, 255, 255, 0.1);
	--kna-color-border-dark-strong: rgba(255, 255, 255, 0.25);

	/* Sémantique */
	--kna-color-success: #0e5b32;
	--kna-color-error: #c0392b;
	--kna-color-focus: #9df758;

	/* ---------------------------------------------------------------
	 * Typographies
	 *
	 * Les familles cibles (Oswald, Plus Jakarta Sans, Caveat) ne sont PAS
	 * téléchargées par le thème. Tant que les fichiers .woff2 ne sont pas
	 * fournis dans assets/fonts/, les piles de repli ci-dessous s'appliquent.
	 * Voir assets/fonts/README.md.
	 * --------------------------------------------------------------- */
	--kna-font-display: 'Oswald', 'Arial Narrow', 'Helvetica Neue', Impact, sans-serif;
	--kna-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--kna-font-hand: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;

	/* Échelle typographique (maquette : 1440 px) */
	--kna-font-size-2xs: 0.5625rem; /*  9 px — baseline, badges */
	--kna-font-size-xs: 0.6875rem; /* 11 px — labels, liens */
	--kna-font-size-sm: 0.75rem; /* 12 px — navigation */
	--kna-font-size-base: 0.8125rem; /* 13 px — titres de carte */
	--kna-font-size-md: 0.875rem; /* 14 px — sous-titres */
	--kna-font-size-lg: 1.0625rem; /* 17 px — titres de section */
	--kna-font-size-xl: 1.25rem; /* 20 px — titres de bloc */
	--kna-font-size-2xl: 1.75rem; /* 28 px — accents */
	--kna-font-size-3xl: 2.625rem; /* 42 px — manuscrit */
	--kna-font-size-display: 4.25rem; /* 68 px — H1 hero */
	--kna-font-size-display-sm: 2.25rem; /* 36 px — H1 hero mobile */

	/* Interlettrage */
	--kna-tracking-tight: -0.01em;
	--kna-tracking-wide: 0.18em;
	--kna-tracking-wider: 0.22em;
	--kna-tracking-widest: 0.28em;

	/* Hauteurs de ligne */
	--kna-leading-none: 1;
	--kna-leading-tight: 1.1;
	--kna-leading-snug: 1.3;
	--kna-leading-normal: 1.55;

	/* Graisses */
	--kna-weight-regular: 400;
	--kna-weight-medium: 500;
	--kna-weight-semibold: 600;
	--kna-weight-bold: 700;
	--kna-weight-extrabold: 800;
	--kna-weight-black: 900;

	/* ---------------------------------------------------------------
	 * Espacements
	 * --------------------------------------------------------------- */
	--kna-space-3xs: 0.125rem; /*  2 px */
	--kna-space-2xs: 0.25rem; /*  4 px */
	--kna-space-xs: 0.5rem; /*  8 px */
	--kna-space-sm: 0.75rem; /* 12 px */
	--kna-space-md: 1rem; /* 16 px */
	--kna-space-lg: 1.5rem; /* 24 px — padding latéral du conteneur */
	--kna-space-xl: 2rem; /* 32 px */
	--kna-space-2xl: 3.5rem; /* 56 px */
	--kna-space-3xl: 5rem; /* 80 px */

	/* ---------------------------------------------------------------
	 * Mise en page
	 * --------------------------------------------------------------- */
	--kna-container-max: 1400px;
	--kna-container-pad: var(--kna-space-lg);
	--kna-header-row1-height: 72px;
	--kna-header-row2-height: 46px;
	--kna-partner-banner-height: 330px;
	--kna-category-card-height: 185px;
	--kna-brand-card-height: 105px;
	--kna-product-media-height: 95px;

	/* Points de rupture — valeurs documentaires.
	 * Les media queries CSS ne peuvent pas consommer de variables :
	 * utiliser ces valeurs en dur dans les feuilles.
	 *   --kna-bp-sm : 480px  (mobile large)
	 *   --kna-bp-md : 768px  (tablette portrait)
	 *   --kna-bp-lg : 1024px (tablette paysage / petit desktop)
	 *   --kna-bp-xl : 1280px (desktop)
	 *   --kna-bp-2xl: 1440px (référence maquette)
	 */

	/* ---------------------------------------------------------------
	 * Rayons et ombres
	 * --------------------------------------------------------------- */
	--kna-radius-xs: 2px;
	--kna-radius-sm: 4px;
	--kna-radius-md: 6px;
	--kna-radius-lg: 8px;
	--kna-radius-xl: 12px;
	--kna-radius-2xl: 16px;
	--kna-radius-pill: 999px;

	--kna-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
	--kna-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
	--kna-shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.16);
	--kna-shadow-accent: 0 8px 20px rgba(157, 247, 88, 0.2);
	--kna-shadow-text: 0 2px 8px rgba(0, 0, 0, 0.8);
	--kna-shadow-text-strong: 0 1px 2px rgba(0, 0, 0, 0.9);

	/* ---------------------------------------------------------------
	 * Transitions et plans
	 * --------------------------------------------------------------- */
	--kna-transition-fast: 150ms ease;
	--kna-transition-base: 300ms ease;
	--kna-transition-slow: 500ms ease;

	--kna-z-content: 10;
	--kna-z-banner: 20;
	--kna-z-header: 50;
	--kna-z-overlay: 90;
	--kna-z-modal: 100;
}