/* =============================================================================
   LUXING DASHBOARD — DESIGN TOKENS
   Palette, typography, spacing, shadows, radius — source unique de vérité.
   Scope : interface membre authentifiée (body.luxing-app).
   ============================================================================= */

body.luxing-app {
    /* --------------------------------------------------------------------- */
    /*  COLOR — Navy (brand primary)                                         */
    /* --------------------------------------------------------------------- */
    --lx-navy-50:  #eef2fb;
    --lx-navy-100: #d5def5;
    --lx-navy-200: #a6b8e7;
    --lx-navy-300: #7691d9;
    --lx-navy-400: #476bcb;
    --lx-navy-500: #2e51b0;   /* accent clair */
    --lx-navy-600: #1a3a8a;   /* BRAND primary */
    --lx-navy-700: #152d6e;   /* hover */
    --lx-navy-800: #0f2152;
    --lx-navy-900: #0a192f;   /* darkest */

    /* --------------------------------------------------------------------- */
    /*  COLOR — Gold (brand accent)                                          */
    /* --------------------------------------------------------------------- */
    --lx-gold-50:  #fbf6e8;
    --lx-gold-100: #f5e8bf;
    --lx-gold-200: #ecd38a;
    --lx-gold-300: #e3bd55;
    --lx-gold-400: #dcae41;
    --lx-gold-500: #d4af37;   /* BRAND accent */
    --lx-gold-600: #b8962d;   /* hover */
    --lx-gold-700: #8e7322;
    --lx-gold-800: #6a561a;
    --lx-gold-900: #3f3310;

    /* --------------------------------------------------------------------- */
    /*  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: #9ca3af;   /* placeholder */
    --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);

    /* --------------------------------------------------------------------- */
    /*  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-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) */
    --lx-shadow-navy: 0 8px 16px -4px rgba(26, 58, 138, 0.25), 0 4px 8px -2px rgba(26, 58, 138, 0.1);
    --lx-shadow-gold: 0 8px 16px -4px rgba(212, 175, 55, 0.3), 0 4px 8px -2px rgba(212, 175, 55, 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-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%);
    --lx-gradient-avatar-a: linear-gradient(135deg, #667eea 0%, #764ba2 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, #f093fb 0%, #f5576c 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);
}