/* ==========================================================================
   BrahimGSM — Design System v4 « Signal Atelier »
   Charte : #1E3A5F · #D4A017 · #0C0E12 · Sora + DM Sans
   ========================================================================== */

:root {
    /* --- Surfaces --- */
    --white:        #FFFFFF;
    --bg-primary:   #F8F6F3;
    --bg-secondary: #F1EFEB;
    --bg-card:      #FFFFFF;
    --bg-image:     #F3F1ED;

    --charcoal:        var(--bg-secondary);
    --charcoal-up:     var(--white);
    --charcoal-card:   var(--white);
    --charcoal-raised: var(--bg-card);
    --charcoal-border: #E5E7EB;
    --charcoal-border-strong: #D1D5DB;

    /* --- Couleurs marque v4 --- */
    --blue-tech:       #1E3A5F;
    --blue-tech-hover: #162E4D;
    --blue-tech-soft:  rgba(30, 58, 95, 0.1);
    --blue-tech-glow:  rgba(30, 58, 95, 0.15);

    --orange-cta:       #D4A017;
    --orange-cta-hover: #B8890F;
    --orange-cta-soft:  rgba(212, 160, 23, 0.12);
    --shadow-cta:       0 4px 20px rgba(212, 160, 23, 0.35);

    --signal-cyan:      #06B6D4;
    --signal-cyan-soft: rgba(6, 182, 212, 0.12);

    --badge-promo-red:  #EF4444;
    --badge-stock-green:#10B981;
    --badge-stock-bg:   #ECFDF5;

    --footer-dark:      #0C0E12;

    /* Alias legacy (anciens styles dark → surfaces claires) */
    --dark-bg:       var(--bg-secondary);
    --dark-surface:  var(--white);

    /* --- Alias système --- */
    --blue-electric:       var(--blue-tech);
    --blue-electric-hover: var(--blue-tech-hover);
    --blue-electric-soft:  var(--blue-tech-soft);
    --blue-electric-glow:  var(--blue-tech-glow);

    --accent-promo:      var(--orange-cta);
    --accent-promo-soft: var(--orange-cta-soft);

    --text-heading: #0C0E12;
    --text-body:    #374151;
    --text-muted:   #6B7280;
    --text-subtle:  #9CA3AF;
    --text-price:   #1E3A5F;

    --gold-300: #3B82F6;
    --gold-500: var(--blue-tech);
    --gold-700: var(--blue-tech-hover);
    --gold-on:  #FFFFFF;
    --color-gold: var(--blue-tech);
    --color-gold-hover: var(--blue-tech-hover);
    --color-gold-soft: var(--blue-tech-soft);

    --blue-500: var(--blue-tech);
    --blue-700: var(--blue-tech-hover);
    --blue-900: #0C1E33;

    --color-navy:             var(--blue-tech);
    --color-navy-hover:       var(--blue-tech-hover);
    --color-navy-active:      #122A47;
    --color-navy-soft:        var(--blue-tech-soft);
    --color-navy-muted:       rgba(30, 58, 95, 0.06);

    --color-primary:          var(--blue-tech);
    --color-primary-hover:    var(--blue-tech-hover);
    --color-primary-active:   #122A47;
    --color-primary-soft:     var(--blue-tech-soft);

    --color-accent:           var(--orange-cta);
    --color-accent-hover:     var(--orange-cta-hover);
    --color-accent-soft:      var(--orange-cta-soft);

    --color-accent-promo:        var(--badge-promo-red);
    --color-accent-promo-hover:  #DC2626;
    --color-accent-promo-soft:   rgba(239, 68, 68, 0.1);
    --color-accent-promo-text:   #FFFFFF;

    --color-accent-tech:      var(--blue-tech);
    --color-accent-tech-hover:var(--blue-tech-hover);
    --color-accent-tech-soft: var(--blue-tech-soft);

    --color-whatsapp:         #25D366;
    --color-whatsapp-hover:   #1DA851;
    --color-whatsapp-soft:    rgba(37, 211, 102, 0.12);

    --color-bg:             var(--bg-primary);
    --color-bg-soft:        var(--bg-secondary);
    --color-bg-muted:       var(--bg-secondary);
    --color-surface:        var(--white);
    --color-surface-raised: var(--bg-card);
    --color-surface-float:  var(--bg-image);

    --color-text:           var(--text-body);
    --color-text-muted:     var(--text-muted);
    --color-text-subtle:    var(--text-subtle);
    --color-heading:        var(--text-heading);

    --color-border:         #E8E4DE;
    --color-border-strong:  #D6D0C8;

    --color-on-primary:     #FFFFFF;
    --color-on-gold:        #FFFFFF;
    --color-on-promo:       #FFFFFF;
    --color-on-dark-muted:  rgba(255, 255, 255, 0.82);

    --color-success:        var(--badge-stock-green);
    --color-success-soft:   var(--badge-stock-bg);
    --color-danger:         #DC2626;
    --color-danger-soft:    rgba(220, 38, 38, 0.1);
    --color-warning:        #D97706;

    --color-stock-ok:       var(--badge-stock-green);
    --color-stock-low:      var(--color-warning);
    --color-stock-out:      var(--text-subtle);

    --color-focus-ring:     rgba(6, 182, 212, 0.35);
    --focus-ring:           0 0 0 3px var(--color-focus-ring);

    /* --- Typo v4 : Sora (titres) + DM Sans (corps) --- */
    --font-display: 'Sora', system-ui, sans-serif;
    --font-body:    'DM Sans', system-ui, sans-serif;

    --teal-trust:       #0D9488;
    --teal-trust-soft:  rgba(13, 148, 136, 0.1);

    --text-xs: 0.6875rem; --text-sm: 0.875rem; --text-base: 0.9375rem;
    --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem;
    --text-3xl: 2rem; --text-4xl: 2.5rem; --text-5xl: 3rem;

    --font-normal: 400; --font-medium: 500; --font-semibold: 600;
    --font-bold: 700; --font-extrabold: 800;

    --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.65;
    --leading-relaxed: 1.75;
    --tracking-tight: -0.02em; --tracking-label: 0.08em;
    --tracking-wider: 0.06em; --tracking-wide: 0.04em;

    --text-price-size: 1.125rem; --text-price-lg: 1.5rem;
    --text-price-old: 0.875rem; --weight-price: 700;
    --hero-title-size: clamp(2rem, 4.5vw, 3rem);

    /* --- Spacing v2 --- */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 3rem;
    --space-xl: 5rem;
    --space-xxl: 7.5rem;

    --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
    --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
    --space-8: 2rem; --space-10: 2.5rem; --space-12: var(--space-lg);
    --space-16: var(--space-xl);

    --section-y: var(--space-lg);
    --section-y-lg: var(--space-xl);
    --container-px: var(--space-sm);

    /* --- Radius v2 --- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 8px 32px rgba(30, 58, 95, 0.12);
    --shadow-gold: var(--shadow-card-hover);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.12);

    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.4s ease;
    --transition-lift: 0.25s cubic-bezier(0.34, 1.2, 0.64, 1);

    --header-height: 68px;
    --topbar-height: 36px;
    --header-bg: rgba(255, 255, 255, 0.98);
    --topbar-bg: var(--blue-tech);
    --bottom-nav-height: 64px;

    --btn-height: 48px; --btn-height-sm: 40px; --btn-height-lg: 52px;
    --btn-radius: var(--radius-sm);
    --btn-font-weight: var(--font-semibold);
    --btn-lift: -2px;

    --card-radius: var(--radius-md);
    --card-border: 1px solid var(--color-border);
    --card-thumb-ratio: 1 / 1;
    --badge-promo-bg: var(--badge-promo-red);
    --badge-promo-color: #FFFFFF;

    --hero-min-height: clamp(420px, 65vh, 680px);
    --hero-min-height-mobile: clamp(320px, 50vh, 480px);
    --hero-overlay: linear-gradient(135deg, rgba(240, 246, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);

    --footer-bg: var(--footer-dark);
    --footer-text: var(--color-on-dark-muted);

    --touch-target-min: 48px;
    --z-bottom-nav: 1045;

    --brand-primary: var(--blue-tech);
    --brand-accent: var(--orange-cta);
    --bg: var(--bg-primary);
    --bg-soft: var(--bg-secondary);
    --surface: var(--white);
    --text: var(--text-body);
    --heading: var(--text-heading);
    --border: var(--color-border);
    --transition: var(--transition-base);
    --danger: var(--color-danger);
    --success: var(--color-success);

    --bs-primary: var(--blue-tech);
    --bs-primary-rgb: 30, 58, 95;
    --bs-body-bg: var(--white);
    --bs-body-color: var(--text-body);
    --bs-link-color: var(--blue-tech);
    --bs-link-hover-color: var(--blue-tech-hover);
    --bs-border-color: var(--color-border);
}

@media (min-width: 992px) {
    :root { --header-height: 116px; }
}

.font-display { font-family: var(--font-display); }
.text-h1, .text-h2, .text-h3 { font-family: var(--font-display); color: var(--text-heading); }
.text-price { color: var(--text-price); font-weight: var(--weight-price); font-variant-numeric: tabular-nums; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }

@media (max-width: 991.98px) {
    body.has-bottom-nav { padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px)); }
    body.has-bottom-nav .whatsapp-float { bottom: calc(var(--bottom-nav-height) + 12px); }
}

@media (min-width: 992px) {
    .container { padding-left: 5rem; padding-right: 5rem; }
}