/* MAGNETIKS — Brand tokens
 * Palette : noir profond + accent rouge cramoisi (logo #be1522)
 * Identité visuelle dark / premium / alarmiste-crédible
 * Typo : Inter (sans), JetBrains Mono (mono pour accents tech)
 */

:root {
	/* === RED — accent signal (sampled from logo) === */
	--mag-red-50:  #fbe9eb;
	--mag-red-100: #f4c7cc;
	--mag-red-200: #e9929c;
	--mag-red-300: #de5d6c;
	--mag-red-400: #d4404e;
	--mag-red-500: #be1522;   /* logo officiel */
	--mag-red-600: #9c111c;
	--mag-red-700: #7a0d16;
	--mag-red-800: #580910;
	--mag-red-900: #36050a;

	/* === BLACK / DARK GREYS === */
	--mag-black:   #0a0a0a;
	--mag-dark-1:  #111111;   /* sections soft */
	--mag-dark-2:  #181818;   /* cards background */
	--mag-dark-3:  #1f1f1f;   /* card hover */
	--mag-dark-4:  #2a2a2a;   /* borders subtle */
	--mag-dark-5:  #3a3a3a;   /* borders standard */

	/* === LIGHT GREYS (for text on dark) === */
	--mag-grey-100: #f5f5f5;
	--mag-grey-200: #e0e0e0;
	--mag-grey-300: #c0c0c0;
	--mag-grey-400: #9a9a9a;
	--mag-grey-500: #6f6f6f;
	--mag-grey-600: #4a4a4a;

	--mag-white:   #ffffff;

	/* === SEMANTIC TOKENS === */
	--mag-bg:           var(--mag-black);
	--mag-bg-soft:      var(--mag-dark-1);
	--mag-bg-card:      var(--mag-dark-2);
	--mag-bg-card-hov:  var(--mag-dark-3);

	--mag-fg:           var(--mag-white);
	--mag-fg-soft:      var(--mag-grey-300);
	--mag-fg-muted:     var(--mag-grey-400);

	--mag-border:       var(--mag-dark-4);
	--mag-border-hov:   var(--mag-red-500);

	--mag-primary:      var(--mag-red-500);
	--mag-primary-hov:  var(--mag-red-600);
	--mag-primary-soft: rgba(190, 21, 34, 0.12);

	/* === TYPOGRAPHY === */
	--mag-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--mag-font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Monaco, Consolas, monospace;

	--mag-size-xs:   0.75rem;   /* 12px */
	--mag-size-sm:   0.875rem;  /* 14px */
	--mag-size-md:   1rem;      /* 16px */
	--mag-size-lg:   1.125rem;  /* 18px */
	--mag-size-xl:   1.25rem;   /* 20px */
	--mag-size-2xl:  1.5rem;    /* 24px */
	--mag-size-3xl:  1.875rem;  /* 30px */
	--mag-size-4xl:  2.5rem;    /* 40px */
	--mag-size-5xl:  3.5rem;    /* 56px */
	--mag-size-6xl:  4.5rem;    /* 72px */
	--mag-size-7xl:  5.5rem;    /* 88px hero */

	/* === SPACING === */
	--mag-sp-1:  0.25rem;
	--mag-sp-2:  0.5rem;
	--mag-sp-3:  0.75rem;
	--mag-sp-4:  1rem;
	--mag-sp-5:  1.25rem;
	--mag-sp-6:  1.5rem;
	--mag-sp-7:  1.75rem;
	--mag-sp-8:  2rem;
	--mag-sp-10: 2.5rem;
	--mag-sp-12: 3rem;
	--mag-sp-14: 3.5rem;
	--mag-sp-16: 4rem;
	--mag-sp-20: 5rem;
	--mag-sp-24: 6rem;
	--mag-sp-32: 8rem;

	/* === RADII === */
	--mag-radius-sm: 4px;
	--mag-radius-md: 8px;
	--mag-radius-lg: 12px;
	--mag-radius-pill: 999px;

	/* === SHADOWS (subtle on dark) === */
	--mag-shadow-glow-red: 0 0 0 1px var(--mag-red-500), 0 8px 32px -8px rgba(190, 21, 34, 0.40);
	--mag-shadow-card:     0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 0 0 1px var(--mag-border);
	--mag-shadow-card-hov: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 0 0 1px var(--mag-red-500), 0 12px 32px -8px rgba(190, 21, 34, 0.18);

	/* === LAYOUT === */
	--mag-container-max: 1320px;
	--mag-container-pad: clamp(1.25rem, 3vw, 2rem);
}