/* ============================================================
   ShopIna — Design Tokens (Web)
   Extrait du design system Flutter. Uniquement variables CSS.
   Les @font-face Nexa sont dans nexa.css.
   ============================================================ */

:root {
    /* ---------- BRAND ---------- */
    --shopina-primary:        #162BA2;
    --shopina-primary-700:    #0F1F7A;
    --shopina-primary-100:    #E7EAFF;
    --shopina-primary-50:     #F1F3FF;

    --shopina-accent:         #F9A416;
    --shopina-accent-700:     #D88500;
    --shopina-accent-100:     #FFEFD2;

    /* ---------- SEMANTIC ---------- */
    --color-success:          #10B981;
    --color-success-bg:       #D1FAE5;
    --color-error:            #EF4444;
    --color-error-bg:         #FEE2E2;
    --color-warning:          #F59E0B;
    --color-warning-bg:       #FEF3C7;
    --color-info:             #2563EB;
    --color-info-bg:          #DBEAFE;

    /* ---------- KPI ---------- */
    --kpi-sales:              #3442C6;
    --kpi-purchase:           #FFA500;
    --kpi-income:             #10920E;
    --kpi-expense:            #D73B3E;

    /* ---------- NEUTRALS ---------- */
    --bg:                     #F1F1F1;
    --surface:                #FFFFFF;
    --surface-2:              #F8F8F8;
    --divider:                #E6E6E9;
    --border:                 #E3E3E3;
    --border-strong:          #C2C2C2;

    --text-primary:           #121535;
    --text-secondary:         #4B5563;
    --text-tertiary:          #828282;
    --text-disabled:          #999999;
    --text-on-primary:        #FFFFFF;

    /* ---------- TYPOGRAPHY ---------- */
    --font-family:            'Nexa', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --fw-regular:             400;
    --fw-semibold:            600;
    --fw-bold:                700;
    --fw-black:               800;

    /* échelle (mobile-first) */
    --fs-display:             28px;
    --fs-h1:                  20px;
    --fs-h2:                  18px;
    --fs-h3:                  16px;
    --fs-body:                14px;
    --fs-small:               13px;
    --fs-caption:             12px;
    --fs-overline:            11px;

    --lh-tight:               1.15;
    --lh-snug:                1.3;
    --lh-normal:              1.45;
    --ls-overline:            1.2px;

    /* ---------- SPACING (système 4-pt) ---------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;

    /* ---------- LAYOUT ---------- */
    --content-padding:  16px;
    --card-padding:     16px;
    --tap-min:          44px;
    --appbar-height:    56px;
    --bottomnav-height: 72px;

    /* ---------- RADII ---------- */
    --radius-xs:  4px;
    --radius-sm:  6px;
    --radius-md:  8px;
    --radius-lg:  10px;
    --radius-xl:  14px;
    --radius-2xl: 20px;
    --radius-pill: 999px;

    /* ---------- SHADOWS ---------- */
    --shadow-card:    0 3px 50px -4px rgba(23,23,23,0.07);
    --shadow-primary: 0 6px 14px rgba(22,43,162,0.18);
    --shadow-accent:  0 6px 14px rgba(249,164,22,0.28);
    --shadow-pop:     0 2px 8px rgba(18,21,53,0.08);
    --shadow-nav:     0 -2px 10px rgba(18,21,53,0.06);

    /* ---------- MOTION ---------- */
    --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast:    140ms;
    --dur-base:    220ms;
    --dur-slow:    360ms;
}

/* ============================================================
   FIX — Hero homepage : fond bleu pendant le chargement
   ============================================================
   Quand l'image de fond du hero (slider_bg_img) n'est pas encore
   chargée, on évite l'effet "page blanche + icônes cassées" en
   posant un background-color bleu primaire. L'image s'affichera
   par-dessus une fois prête.
*/
.home-banner-section {
    background-color: var(--shopina-primary, #162BA2);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 480px;
}

/* Pendant que les images du hero chargent, on masque les icônes
   "image cassée" du navigateur pour rester propre. */
.home-banner-section img[alt]:not([src]),
.home-banner-section img[src=""],
.home-banner-section img[src$="img-upload.png"] {
    visibility: hidden;
}

/* Les logos play-store et bannière utilisent souvent un placeholder
   par défaut (img-upload.png) tant que la BDD n'a pas de fichier. */
.banner-img img,
.play-store img,
.banner-scan img {
    max-width: 100%;
    height: auto;
}

/* Le logo header (souvent vide au 1er render) reste discret */
.site-logo img[alt]:not([src]),
.site-logo img[src=""] {
    visibility: hidden;
}

/* ============================================================
   Helpers (optionnels — utilisables dans les vues Blade)
   ============================================================ */
.bg-shopina-primary { background-color: var(--shopina-primary) !important; color: var(--text-on-primary); }
.bg-shopina-accent  { background-color: var(--shopina-accent)  !important; }
.text-shopina-primary { color: var(--shopina-primary) !important; }
.text-shopina-accent  { color: var(--shopina-accent)  !important; }
.shopina-card {
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}
.shopina-card-hero {
    background: var(--shopina-primary);
    color: var(--text-on-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-primary);
}