/* ==========================================================================
   DIGICOM-IT — Design tokens
   Le DARK est la direction artistique native du site : ses valeurs sont
   définies sur :root. Le Light mode est une variante, activée par
   [data-theme="light"].
   Source de vérité : DESIGN-DARK.md (principal) + DESIGN.md (variante claire)
   ========================================================================== */

:root {
  /* ---- Marque ---------------------------------------------------------- */
  --brand: #FD1C5C;
  --brand-hover: #FF4A7E;
  --brand-soft: #2C0F1B;
  --brand-ink: #FF8AA8;
  --brand-contrast: #FFFFFF;

  /* Accents secondaires, réservés aux halos et aux dégradés de filet */
  --accent-violet: #7C5CFF;
  --accent-blue: #2E8BFF;

  /* Bleu du logo DIGICOM-IT (voir PHASE-1.md § écarts) */
  --logo-indigo: #0A005E;

  /* ---- Texte ----------------------------------------------------------- */
  --ink: #F7F8FA;
  --body: #D6DCE5;
  --muted: #9AA7B8;
  --faint: #6E7C90;

  /* ---- Surfaces (profondeur par nuances de bleu nuit) ------------------- */
  --canvas: #07111F;
  --canvas-warm: #07111F;
  --canvas-soft: #0B1728;
  --surface: #101E31;
  --surface-soft: #0D1B2D;
  --surface-raised: #15253A;
  --hairline: #1E3046;
  --hairline-strong: #29405A;

  --navy: #050D18;
  --navy-soft: #0B1728;

  /* ---- Sémantique ------------------------------------------------------ */
  --success: #6CE9A6;
  --success-soft: #10271D;
  --warning: #FEC84B;
  --warning-soft: #2A210B;
  --error: #FDA29B;
  --error-soft: #2A1415;
  --info: #84CAFF;
  --info-soft: #102438;

  /* ---- Ombres ---------------------------------------------------------- */
  --shadow-subtle: 0 12px 40px rgba(0, 0, 0, 0.28);
  --shadow-floating: 0 24px 80px rgba(0, 0, 0, 0.42);
  --shadow-header: 0 10px 34px rgba(2, 8, 18, 0.55);

  /* ---- Header flottant / méga-menu -------------------------------------- */
  --nav-bg: rgba(13, 27, 45, 0.72);
  --nav-bg-stuck: rgba(11, 23, 40, 0.9);
  --nav-border: rgba(120, 160, 210, 0.16);
  --nav-border-stuck: rgba(120, 160, 210, 0.22);
  --menu-bg: #0B1728;
  --menu-editorial-bg: var(--surface);

  /* ---- Halos lumineux --------------------------------------------------- */
  --halo-fuchsia: rgba(253, 28, 92, 0.20);
  --halo-violet: rgba(124, 92, 255, 0.18);
  --halo-blue: rgba(46, 139, 255, 0.16);
  --halo-strength: 1;
  --spotlight: rgba(255, 255, 255, 0.055);

  --overlay-scrim: rgba(3, 8, 16, 0.72);
  --client-logo-filter: none;      /* fichiers déjà blancs */
  --logo-brand-filter: brightness(0) invert(1);

  /* ---- Rayons ---------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-panel: 28px;
  --r-hero: 36px;
  --r-full: 9999px;

  /* ---- Espacements ----------------------------------------------------- */
  --s-xxs: 4px;
  --s-xs: 8px;
  --s-sm: 12px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-2xl: 48px;
  --s-3xl: 64px;
  --s-section: 128px;

  /* ---- Layout ---------------------------------------------------------- */
  --content-max: 1280px;
  --text-max: 760px;
  --gutter: 32px;
  --grid-gap: 24px;
  --section-y: 96px;
  --header-h: 72px;

  /* ---- Typographie ------------------------------------------------------
     Poppins porte les titres et la navigation ; Inter porte le texte courant. */
  --font-display: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-hand: "Caveat", "Segoe Script", cursive;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.5rem, 1.5rem + 4vw, 4.25rem);   /* 40 → 68 */
  --fs-h1: clamp(2.25rem, 1.55rem + 2.8vw, 3.5rem);        /* 36 → 56 */
  --fs-h2: clamp(1.875rem, 1.35rem + 2.1vw, 3rem);         /* 30 → 48 */
  --fs-h3: clamp(1.625rem, 1.42rem + 0.8vw, 2rem);         /* 26 → 32 */
  --fs-h4: 1.375rem;
  --fs-body-xl: clamp(1.125rem, 1.03rem + 0.35vw, 1.3125rem);
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-body-sm: 0.875rem;
  --fs-caption: 0.75rem;

  --lh-display: 1.04;
  --lh-heading: 1.1;
  --lh-body: 1.65;

  --ls-display: -0.032em;
  --ls-h1: -0.028em;
  --ls-h2: -0.024em;
  --ls-h3: -0.02em;
  --ls-eyebrow: 0.06em;

  /* ---- Mouvement ------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 220ms;
  --dur-menu: 260ms;
  --dur-reveal: 820ms;

  color-scheme: dark;
}

/* ==========================================================================
   LIGHT — variante claire, lumineuse et très respirante
   ========================================================================== */

:root[data-theme="light"] {
  --brand: #FD1C5C;
  --brand-hover: #DC0A45;
  --brand-soft: #FFF0F4;
  --brand-ink: #B00034;

  --accent-violet: #5B3FD6;
  --accent-blue: #175CD3;

  --ink: #0B1728;
  --body: #344054;
  --muted: #667085;
  --faint: #98A2B3;

  --canvas: #FFFFFF;
  --canvas-warm: #FCFBFA;
  --canvas-soft: #F7F8FA;
  --surface: #FFFFFF;
  --surface-soft: #F2F4F7;
  --surface-raised: #FFFFFF;
  --hairline: #E4E7EC;
  --hairline-strong: #D0D5DD;

  --navy: #07111F;
  --navy-soft: #0B1728;

  --success: #067647;
  --success-soft: #ECFDF3;
  --warning: #B54708;
  --warning-soft: #FFFAEB;
  --error: #B42318;
  --error-soft: #FEF3F2;
  --info: #175CD3;
  --info-soft: #EFF8FF;

  --shadow-subtle: 0 8px 32px rgba(11, 23, 40, 0.06);
  --shadow-floating: 0 18px 60px rgba(11, 23, 40, 0.10);
  --shadow-header: 0 10px 34px rgba(11, 23, 40, 0.09);

  --nav-bg: rgba(255, 255, 255, 0.78);
  --nav-bg-stuck: rgba(255, 255, 255, 0.93);
  --nav-border: rgba(11, 23, 40, 0.09);
  --nav-border-stuck: rgba(11, 23, 40, 0.12);
  --menu-bg: #FFFFFF;
  --menu-editorial-bg: var(--canvas-soft);

  --halo-fuchsia: rgba(253, 28, 92, 0.10);
  --halo-violet: rgba(91, 63, 214, 0.09);
  --halo-blue: rgba(23, 92, 211, 0.08);
  --halo-strength: 0.7;
  --spotlight: rgba(11, 23, 40, 0.04);

  --overlay-scrim: rgba(11, 23, 40, 0.45);
  --client-logo-filter: invert(1) brightness(0.32) contrast(1.1);
  --logo-brand-filter: none;

  color-scheme: light;
}

/* Le Dark est la version native : aucune bascule automatique sur la
   préférence système. Le Light ne s'applique que si le visiteur le choisit
   (bouton du header), et son choix est mémorisé. */

/* ---- Points de rupture --------------------------------------------------
   desktop : >= 1280px | tablette : 768–1279px | mobile : < 768px
-------------------------------------------------------------------------- */

@media (max-width: 1279px) {
  :root { --gutter: 24px; --section-y: 80px; }
}

@media (max-width: 767px) {
  :root { --gutter: 20px; --section-y: 60px; --header-h: 64px; }
}