/* ============================================================
   MCPI RÉNOVATION — DESIGN TOKENS
   Signature : "bleu corporate bâtiment"
   Palette extraite du flyer client (référence couleurs).
   Distinct visuel des sites Fouchet & Mayron.
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     1. COULEURS PRIMITIVES (extraites du flyer)
     ---------------------------------------------------------- */

  /* Bleu électrique vif — couleur signature MCPI (bandeau, CTA, accents) */
  --blue-electric-50:  #EAF2FE;
  --blue-electric-100: #CFE0FC;
  --blue-electric-200: #9EC1F9;
  --blue-electric-300: #6BA0F3;
  --blue-electric-400: #3D82EC;
  --blue-electric-500: #1E6FE0;   /* CŒUR signature */
  --blue-electric-600: #1659C2;
  --blue-electric-700: #1452C8;   /* bandeau royal du flyer */
  --blue-electric-800: #0F3E94;
  --blue-electric-900: #0C2E6E;

  /* Bleu marine très profond — fonds premium, typo titres sur clair */
  --navy-50:  #E7EBF2;
  --navy-100: #C2CCDD;
  --navy-200: #8A9BBC;
  --navy-300: #54688F;
  --navy-400: #2C4067;
  --navy-500: #182C4D;
  --navy-600: #11213B;
  --navy-700: #0A1A33;   /* marine profond signature */
  --navy-800: #06101F;
  --navy-900: #030914;   /* presque noir bleuté (dark mode bg) */

  /* Anthracite (toitures du flyer) — neutres froids */
  --slate-50:  #F6F8FA;
  --slate-100: #EBEEF2;
  --slate-200: #DBE1E8;
  --slate-300: #C2CAD4;
  --slate-400: #97A2B0;
  --slate-500: #6B7686;
  --slate-600: #4B5563;
  --slate-700: #353D49;
  --slate-800: #232A33;
  --slate-900: #161B22;

  --white: #FFFFFF;
  --black: #05080D;

  /* Couleurs fonctionnelles */
  --green-success: #1FA463;   /* "DEVIS GRATUIT", validations */
  --green-success-soft: #E5F5ED;
  --amber-warning: #E0901E;
  --red-error: #D43C3C;

  /* ----------------------------------------------------------
     2. COULEURS SÉMANTIQUES — LIGHT (défaut)
     ---------------------------------------------------------- */
  --color-bg:            var(--white);
  --color-bg-subtle:     var(--slate-50);
  --color-bg-muted:      var(--slate-100);
  --color-surface:       var(--white);
  --color-surface-raised:var(--white);

  --color-text:          var(--navy-700);
  --color-text-muted:    var(--slate-600);
  --color-text-subtle:   var(--slate-500);
  --color-text-inverse:  var(--white);

  --color-primary:       var(--blue-electric-500);
  --color-primary-hover: var(--blue-electric-600);
  --color-primary-active:var(--blue-electric-700);
  --color-primary-soft:  var(--blue-electric-50);

  --color-secondary:     var(--navy-700);
  --color-secondary-hover:var(--navy-600);

  --color-accent:        var(--blue-electric-700);

  --color-border:        var(--slate-200);
  --color-border-strong: var(--slate-300);
  --color-ring:          var(--blue-electric-400);

  --color-cta-bg:        var(--blue-electric-500);
  --color-cta-text:      var(--white);
  --color-cta-bg-hover:  var(--blue-electric-600);

  --color-success:       var(--green-success);
  --color-success-soft:  var(--green-success-soft);
  --color-warning:       var(--amber-warning);
  --color-error:         var(--red-error);

  /* ----------------------------------------------------------
     3. DÉGRADÉS (signature hero "bâtiment")
     ---------------------------------------------------------- */
  --gradient-hero:       linear-gradient(135deg, #0A1A33 0%, #11213B 45%, #1452C8 100%);
  --gradient-hero-soft:  linear-gradient(160deg, #0C2E6E 0%, #1E6FE0 100%);
  --gradient-primary:    linear-gradient(135deg, #1E6FE0 0%, #1452C8 100%);
  --gradient-cta:        linear-gradient(120deg, #3D82EC 0%, #1659C2 100%);
  --gradient-navy-fade:  linear-gradient(180deg, #0A1A33 0%, rgba(10,26,51,0) 100%);
  --gradient-overlay:    linear-gradient(180deg, rgba(3,9,20,0.05) 0%, rgba(3,9,20,0.72) 100%);
  --gradient-accent-bar: linear-gradient(180deg, #3D82EC 0%, #0A1A33 100%); /* barres du monogramme */
}

/* ----------------------------------------------------------
   4. COULEURS SÉMANTIQUES — DARK MODE
   ---------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:            var(--navy-900);
    --color-bg-subtle:     var(--navy-800);
    --color-bg-muted:      var(--navy-700);
    --color-surface:       var(--navy-800);
    --color-surface-raised:var(--navy-700);

    --color-text:          var(--slate-50);
    --color-text-muted:    var(--slate-300);
    --color-text-subtle:   var(--slate-400);
    --color-text-inverse:  var(--navy-900);

    --color-primary:       var(--blue-electric-400);
    --color-primary-hover: var(--blue-electric-300);
    --color-primary-active:var(--blue-electric-200);
    --color-primary-soft:  rgba(30,111,224,0.16);

    --color-secondary:     var(--slate-100);
    --color-secondary-hover:var(--white);

    --color-accent:        var(--blue-electric-300);

    --color-border:        rgba(255,255,255,0.10);
    --color-border-strong: rgba(255,255,255,0.18);
    --color-ring:          var(--blue-electric-400);

    --color-cta-bg:        var(--blue-electric-500);
    --color-cta-text:      var(--white);
    --color-cta-bg-hover:  var(--blue-electric-400);

    --color-success:       #2FBE78;
    --color-success-soft:  rgba(31,164,99,0.16);

    --gradient-hero:       linear-gradient(135deg, #030914 0%, #0A1A33 50%, #11213B 100%);
    --gradient-overlay:    linear-gradient(180deg, rgba(3,9,20,0.15) 0%, rgba(3,9,20,0.85) 100%);
  }
}

/* Forçage manuel via [data-theme] */
[data-theme="dark"] {
  --color-bg: var(--navy-900);
  --color-surface: var(--navy-800);
  --color-text: var(--slate-50);
  --color-text-muted: var(--slate-300);
  --color-primary: var(--blue-electric-400);
  --color-border: rgba(255,255,255,0.10);
}

:root {
  /* ----------------------------------------------------------
     5. TYPOGRAPHIE
     Heading : Montserrat (géométrique, solide, "corporate bâtiment")
     Body    : Inter (workhorse web 2026, lisibilité max)
     ---------------------------------------------------------- */
  --font-heading: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Échelle typographique (ratio 1.25 — Major Third) */
  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-lg:    1.25rem;   /* 20px */
  --text-xl:    1.5625rem; /* 25px */
  --text-2xl:   1.9531rem; /* 31px */
  --text-3xl:   2.4414rem; /* 39px */
  --text-4xl:   3.0518rem; /* 49px */
  --text-5xl:   3.8147rem; /* 61px */
  --text-display:4.7684rem;/* 76px */

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;  /* overlines type "MAÇONNERIE" du flyer */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;

  /* ----------------------------------------------------------
     6. ESPACEMENT (base 4px)
     ---------------------------------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  2.5rem;   /* 40 */
  --space-8:  3rem;     /* 48 */
  --space-10: 4rem;     /* 64 */
  --space-12: 6rem;     /* 96 */
  --space-16: 8rem;     /* 128 */

  --container-max: 1200px;
  --container-narrow: 760px;

  /* ----------------------------------------------------------
     7. BORDER RADIUS
     ---------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     8. OMBRES (teintées navy pour cohérence "corporate")
     ---------------------------------------------------------- */
  --shadow-xs:  0 1px 2px rgba(10,26,51,0.06);
  --shadow-sm:  0 2px 6px rgba(10,26,51,0.08);
  --shadow-md:  0 6px 18px rgba(10,26,51,0.10);
  --shadow-lg:  0 14px 34px rgba(10,26,51,0.14);
  --shadow-xl:  0 24px 60px rgba(10,26,51,0.18);
  --shadow-primary: 0 10px 30px rgba(30,111,224,0.32); /* CTA glow bleu */
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.08);

  /* ----------------------------------------------------------
     9. TRANSITIONS & Z-INDEX
     ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}