/* =============================================================================
   LUXING — DESIGN TOKENS
   Palette, typography, spacing, shadows, radius — source unique de vérité.

   Khalid 25/05/2026 PM — Migration Tailwind 4 (Phase 1) :
   Les tokens --lx-* sont déplacés de `body.luxing-app` vers `:root` pour qu'ils
   soient consommables PARTOUT (landing publique, auth, footer embedded, Tailwind
   4 via @theme inline). Les redéclarations dans landing.css peuvent maintenant
   être supprimées en toute sécurité (Phase 4 cleanup).

   Les règles de RESET (font-family du body, h1-h6 styling, focus-visible,
   ::selection) restent scopées à `body.luxing-app` (interface membre auth)
   pour ne pas casser la landing publique qui a ses propres règles typo.
   ============================================================================= */

:root {
    /* --------------------------------------------------------------------- */
    /*  COLOR — Navy (brand primary)                                         */
    /* --------------------------------------------------------------------- */
    /* Charte officielle Luxing (validée Victor 09/05/2026) — alignée
       avec landing.css (lxl-*) et auth.css. Navy plus profond et gold
       plus subtil → look premium cohérent cross-pages. */
    --lx-navy-50:  #eef2fb;
    --lx-navy-100: #d5def5;
    --lx-navy-200: #a6b8e7;
    --lx-navy-300: #7691d9;
    --lx-navy-400: #2e51b0;
    --lx-navy-500: #1a3a8a;
    --lx-navy-600: #0A1F44;   /* BRAND primary (charte officielle) */
    --lx-navy-700: #08193a;   /* hover */
    --lx-navy-800: #061232;
    --lx-navy-900: #040b22;   /* darkest */
    --lx-navy:     #0A1F44;   /* alias direct */

    /* --------------------------------------------------------------------- */
    /*  COLOR — Gold (brand accent)                                          */
    /* --------------------------------------------------------------------- */
    --lx-gold-50:  #faf5e9;
    --lx-gold-100: #f1e6c4;
    --lx-gold-200: #e6d3a0;
    --lx-gold-300: #dac07b;
    --lx-gold-400: #d3b56e;
    --lx-gold-500: #C9A961;   /* BRAND accent (charte officielle) */
    --lx-gold-600: #b08c47;   /* hover */
    --lx-gold-700: #8e7322;
    --lx-gold-800: #6a561a;
    --lx-gold-900: #3f3310;
    --lx-gold:     #C9A961;   /* alias direct */

    /* --------------------------------------------------------------------- */
    /*  COLOR — Neutrals (grey scale fin pour UI moderne)                    */
    /* --------------------------------------------------------------------- */
    --lx-neutral-0:   #ffffff;
    --lx-neutral-50:  #fafbfc;   /* app background */
    --lx-neutral-100: #f4f6f8;   /* card subtle bg */
    --lx-neutral-150: #eef0f3;
    --lx-neutral-200: #e5e8ec;   /* borders */
    --lx-neutral-300: #d1d5db;
    --lx-neutral-400: #6b7280;   /* placeholder — WCAG AA (était #9ca3af, ratio 2.85:1 FAIL) */
    --lx-neutral-500: #6b7280;   /* muted text */
    --lx-neutral-600: #4b5563;   /* body text secondary */
    --lx-neutral-700: #374151;   /* body text primary */
    --lx-neutral-800: #1f2937;
    --lx-neutral-900: #111827;   /* headings dark */

    /* --------------------------------------------------------------------- */
    /*  COLOR — Semantic (status)                                            */
    /* --------------------------------------------------------------------- */
    --lx-success-50:  #ecfdf5;
    --lx-success-500: #10b981;
    --lx-success-600: #059669;
    --lx-warning-50:  #fffbeb;
    --lx-warning-500: #f59e0b;
    --lx-warning-600: #d97706;
    --lx-danger-50:   #fef2f2;
    --lx-danger-500:  #ef4444;
    --lx-danger-600:  #dc2626;
    --lx-info-50:     #eff6ff;
    --lx-info-500:    #3b82f6;
    --lx-info-600:    #2563eb;

    /* --------------------------------------------------------------------- */
    /*  COLOR — Aliases sémantiques (usage dans composants)                  */
    /* --------------------------------------------------------------------- */
    --lx-bg-app:        var(--lx-neutral-50);
    --lx-bg-surface:    var(--lx-neutral-0);
    --lx-bg-subtle:     var(--lx-neutral-100);
    --lx-bg-hover:      var(--lx-neutral-150);

    --lx-text-primary:  var(--lx-neutral-900);
    --lx-text-body:     var(--lx-neutral-700);
    --lx-text-muted:    var(--lx-neutral-500);
    --lx-text-inverse:  var(--lx-neutral-0);

    --lx-border:        var(--lx-neutral-200);
    --lx-border-strong: var(--lx-neutral-300);

    --lx-accent:        var(--lx-navy-600);
    --lx-accent-hover:  var(--lx-navy-700);
    --lx-accent-soft:   var(--lx-navy-50);

    --lx-highlight:        var(--lx-gold-500);
    --lx-highlight-hover:  var(--lx-gold-600);
    --lx-highlight-soft:   var(--lx-gold-50);

    /* --------------------------------------------------------------------- */
    /*  COMPLÉMENTS (Phase 1 unification — 19/05/2026)                       */
    /*  Tokens référencés par les autres systèmes CSS (landing / auth) mais  */
    /*  jamais définis → ils tombaient en valeur invalide. + alias de compat.*/
    /* --------------------------------------------------------------------- */
    --lx-ivory:          var(--lx-gold-50);     /* ivoire — surfaces premium */
    --lx-surface:        var(--lx-neutral-0);
    --lx-bg-elevated:    var(--lx-neutral-0);
    --lx-text-secondary: var(--lx-neutral-600);
    --lx-navy-hover:     var(--lx-navy-700);
    --lx-radius-pill:    var(--lx-radius-full);
    --lx-success-100:    #d1fae5;
    --lx-warning-100:    #fef3c7;
    --lx-warning-400:    #fbbf24;
    --lx-danger-100:     #fee2e2;
    --lx-info-100:       #dbeafe;

    /* --------------------------------------------------------------------- */
    /*  TYPOGRAPHY                                                           */
    /* --------------------------------------------------------------------- */
    --lx-font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    --lx-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --lx-font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;

    /* Echelle typographique (modular scale ratio 1.125-1.2) */
    --lx-text-xs:   0.75rem;     /* 12 */
    --lx-text-sm:   0.8125rem;   /* 13 */
    --lx-text-base: 0.9375rem;   /* 15 — body SaaS lisible */
    --lx-text-md:   1rem;        /* 16 */
    --lx-text-lg:   1.125rem;    /* 18 */
    --lx-text-xl:   1.25rem;     /* 20 */
    --lx-text-2xl:  1.5rem;      /* 24 */
    --lx-text-3xl:  1.875rem;    /* 30 */
    --lx-text-4xl:  2.25rem;     /* 36 */
    --lx-text-5xl:  3rem;        /* 48 */

    --lx-leading-tight:  1.2;
    --lx-leading-snug:   1.35;
    --lx-leading-normal: 1.5;
    --lx-leading-relaxed: 1.65;

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

    /* --------------------------------------------------------------------- */
    /*  SPACING (base 4px)                                                   */
    /* --------------------------------------------------------------------- */
    --lx-space-0:    0;
    --lx-space-1:   0.25rem;   /*  4 */
    --lx-space-2:   0.5rem;    /*  8 */
    --lx-space-3:   0.75rem;   /* 12 */
    --lx-space-4:   1rem;      /* 16 */
    --lx-space-5:   1.25rem;   /* 20 */
    --lx-space-6:   1.5rem;    /* 24 */
    --lx-space-7:   1.75rem;   /* 28 — palier ajouté Phase 1 (bug --lx-space-7) */
    --lx-space-8:   2rem;      /* 32 */
    --lx-space-10:  2.5rem;    /* 40 */
    --lx-space-12:  3rem;      /* 48 */
    --lx-space-16:  4rem;      /* 64 */
    --lx-space-20:  5rem;      /* 80 */

    /* --------------------------------------------------------------------- */
    /*  RADIUS                                                               */
    /* --------------------------------------------------------------------- */
    --lx-radius-xs:  0.25rem;   /*  4 */
    --lx-radius-sm:  0.5rem;    /*  8 */
    --lx-radius-md:  0.75rem;   /* 12 */
    --lx-radius-lg:  1rem;      /* 16 */
    --lx-radius-xl:  1.25rem;   /* 20 */
    --lx-radius-2xl: 1.5rem;    /* 24 */
    --lx-radius-full: 9999px;

    /* --------------------------------------------------------------------- */
    /*  SHADOWS (soft, modernes)                                             */
    /* --------------------------------------------------------------------- */
    --lx-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
    --lx-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
    --lx-shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.04);
    --lx-shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
    --lx-shadow-xl: 0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03);

    /* Shadow colored (pour hover CTA) */
    /* Teintes alignées sur la charte officielle (navy #0A1F44, gold #C9A961). */
    --lx-shadow-navy: 0 8px 16px -4px rgba(10, 31, 68, 0.25), 0 4px 8px -2px rgba(10, 31, 68, 0.1);
    --lx-shadow-gold: 0 8px 16px -4px rgba(201, 169, 97, 0.3), 0 4px 8px -2px rgba(201, 169, 97, 0.15);

    /* --------------------------------------------------------------------- */
    /*  TRANSITIONS                                                          */
    /* --------------------------------------------------------------------- */
    --lx-transition-fast:   120ms cubic-bezier(0.4, 0, 0.2, 1);
    --lx-transition-base:   200ms cubic-bezier(0.4, 0, 0.2, 1);
    --lx-transition-slow:   320ms cubic-bezier(0.4, 0, 0.2, 1);
    --lx-easing-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1);

    /* --------------------------------------------------------------------- */
    /*  LAYOUT                                                               */
    /* --------------------------------------------------------------------- */
    --lx-header-height: 64px;
    --lx-content-max-width: 1280px;
    --lx-section-header-max-width: 760px;        /* Phase 1.5 (F3-bis) — .lx-section-header */
    --lx-section-subtitle-max-width: 640px;      /* Phase 1.5 (F3-bis) — .lx-section-subtitle */
    --lx-space-28: 7rem;                          /* 112px — palier ajouté Phase 1.5 (F3-bis hero padding) */
    --lx-z-header: 1000;
    --lx-z-dropdown: 1100;
    --lx-z-modal: 1200;
    --lx-z-toast: 1300;

    /* --------------------------------------------------------------------- */
    /*  GRADIENTS SIGNATURE                                                  */
    /* --------------------------------------------------------------------- */
    --lx-gradient-brand: linear-gradient(135deg, var(--lx-navy-600) 0%, var(--lx-navy-500) 100%);
    --lx-gradient-hero: linear-gradient(135deg, var(--lx-navy-800) 0%, var(--lx-navy-600) 60%, var(--lx-navy-500) 100%);
    --lx-gradient-gold: linear-gradient(135deg, var(--lx-gold-400) 0%, var(--lx-gold-600) 100%);
    --lx-gradient-premium: linear-gradient(135deg, var(--lx-navy-700) 0%, var(--lx-gold-500) 100%);
    /* Variantes avatar — alignées charte (navy / navy-gold / gold). */
    --lx-gradient-avatar-a: linear-gradient(135deg, var(--lx-navy-600) 0%, var(--lx-navy-400) 100%);
    --lx-gradient-avatar-b: linear-gradient(135deg, var(--lx-navy-500) 0%, var(--lx-gold-500) 100%);
    --lx-gradient-avatar-c: linear-gradient(135deg, var(--lx-gold-600) 0%, var(--lx-gold-300) 100%);
}

/* =============================================================================
   RESET LOCAL pour interface membre (scoped pour ne pas affecter landing)
   ============================================================================= */
body.luxing-app {
    font-family: var(--lx-font-body);
    font-size: var(--lx-text-base);
    line-height: var(--lx-leading-normal);
    color: var(--lx-text-body);
    background-color: var(--lx-bg-app);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'cv11', 'ss01', 'ss03';
}

body.luxing-app h1,
body.luxing-app h2,
body.luxing-app h3,
body.luxing-app h4,
body.luxing-app h5,
body.luxing-app h6 {
    font-family: var(--lx-font-display);
    color: var(--lx-text-primary);
    font-weight: var(--lx-weight-semibold);
    line-height: var(--lx-leading-tight);
    letter-spacing: -0.01em;
}

body.luxing-app h1 { font-size: var(--lx-text-3xl); }
body.luxing-app h2 { font-size: var(--lx-text-2xl); }
body.luxing-app h3 { font-size: var(--lx-text-xl); }
body.luxing-app h4 { font-size: var(--lx-text-lg); }

/* Focus visibles (accessibilité WCAG) */
body.luxing-app *:focus-visible {
    outline: 2px solid var(--lx-navy-500);
    outline-offset: 2px;
    border-radius: var(--lx-radius-xs);
}

/* Selection */
body.luxing-app ::selection {
    background-color: var(--lx-navy-100);
    color: var(--lx-navy-800);
}