/* ==========================================================================
   Mokhtar GSM - Charte graphique (design tokens)
   Boutique e-commerce high-tech. Inclure AVANT app.css.
   ========================================================================== */

:root {
    /* Couleurs de marque */
    --brand-primary: #146EE4;   /* Bleu principal */
    --brand-secondary: #0D3366; /* Bleu fonce */
    --brand-accent: #00C2FF;    /* Cyan accent */
    --brand-primary-dark: #0F58B8;
    --brand-primary-soft: rgba(20, 110, 228, 0.08);

    /* Etats */
    --success: #16a34a;
    --danger: #dc2626;
    --warning: #f59e0b;
    --whatsapp: #25D366;

    /* Surfaces / texte */
    --bg: #FFFFFF;
    --bg-soft: #F4F7FC;
    --surface: #FFFFFF;
    --text: #333333;
    --text-muted: #6B7280;
    --heading: #0D3366;
    --border: #E5E9F2;

    /* Rayons */
    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 9px;
    --radius-pill: 999px;

    /* Ombres */
    --shadow-sm: 0 1px 3px rgba(13, 51, 102, 0.08);
    --shadow-md: 0 6px 20px rgba(13, 51, 102, 0.10);
    --shadow-lg: 0 16px 40px rgba(13, 51, 102, 0.14);

    /* Transitions */
    --transition: 0.2s ease;

    /* Bootstrap overrides (variables CSS) */
    --bs-primary: #146EE4;
    --bs-primary-rgb: 20, 110, 228;
    --bs-link-color: #146EE4;
    --bs-link-hover-color: #0F58B8;
    --bs-body-color: #333333;
    --bs-border-radius: 0.875rem;
}

/* Mapper les utilitaires Bootstrap sur la charte */
.btn-primary {
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary-dark);
    --bs-btn-hover-border-color: var(--brand-primary-dark);
    --bs-btn-active-bg: var(--brand-secondary);
    --bs-btn-active-border-color: var(--brand-secondary);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-active-bg: var(--brand-primary);
}

.text-primary { color: var(--brand-primary) !important; }
.bg-primary { background-color: var(--brand-primary) !important; }
.text-brand-secondary { color: var(--brand-secondary) !important; }
.bg-brand-soft { background-color: var(--bg-soft) !important; }

.btn-whatsapp {
    background-color: var(--whatsapp);
    border-color: var(--whatsapp);
    color: #fff;
}
.btn-whatsapp:hover { background-color: #1ebe5d; color: #fff; }