/* =========================================================
   VARIABLES CSS — LOURA MARKET
   Centralise toutes les valeurs du design system
   À charger EN PREMIER avant tous les autres CSS
========================================================= */


/* =========================================================
   POLICES SELF-HOSTED
========================================================= */

@font-face {
	font-family: 'Roboto';
	src: url('assets/fonts/roboto-v51-latin-300.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: url('assets/fonts/roboto-v51-latin-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: url('assets/fonts/roboto-v51-latin-italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: url('assets/fonts/roboto-v51-latin-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: url('assets/fonts/roboto-v51-latin-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: url('assets/fonts/roboto-v51-latin-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('assets/fonts/poppins-v24-latin-300.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('assets/fonts/poppins-v24-latin-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('assets/fonts/poppins-v24-latin-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('assets/fonts/poppins-v24-latin-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}


/* =========================================================
   COULEURS
========================================================= */

:root {

  /* ── Primaires — Bleu institutionnel ── */
  --color-primary:             #00457c;
  --color-primary-hover:       #003560;
  --color-primary-light:       #3AA8DB;
  --color-primary-light-hover: #2b8fb8;
  --color-primary-bg:          #cfe5fb;
  --color-primary-bg-light:    #eff6ff;

  /* ── CTA / Accent — Orange commercial ── */
  --color-cta:                 #EF9C4D;
  --color-cta-hover:           #d4863a;
  --color-cta-secondary:       #e07b3a;
  --color-cta-secondary-hover: #c96b2e;

  /* ── Promo ── */
  --color-promo:               #e63946;

  /* ── Statuts commandes ── */
  --color-status-on-hold:      #854F0B;
  --color-status-processing:   #185FA5;
  --color-status-completed:    #3B6D11;
  --color-status-cancelled:    #A32D2D;
  --color-status-refunded:     #5F5E5A;

  /* ── Succès / Info / Erreur ── */
  --color-success:             #10b981;
  --color-success-bg:          #ecfdf5;
  --color-success-text:        #065f46;
  --color-success-cta:         #248400;
  --color-success-cta-hover:   #1a6b00;

  --color-info:                #3AA8DB;
  --color-info-bg:             #eff6ff;
  --color-info-text:           #00457c;

  --color-error:               #dc3545;
  --color-error-bg:            #fee2e2;
  --color-error-text:          #991b1b;
  --color-error-border:        #f5c2c7;

  /* ── Warning ── */
  --color-warning-bg:          #fff3cd;
  --color-warning-border:      #ffeeba;
  --color-warning-text:        #856404;

  /* ── Textes ── */
  --color-text:                #111827;
  --color-text-secondary:      #374151;
  --color-text-muted:          #6b7280;
  --color-text-placeholder:    #9ca3af;
  --color-text-link:           #3AA8DB;
  --color-text-link-hover:     #2b8fb8;

  /* ── Fonds ── */
  --color-bg:                  #ffffff;
  --color-bg-soft:             #f9fafb;
  --color-bg-muted:            #f3f4f6;

  /* ── Feature produit ── */
  --color-feature-text:        #96C3D7;

  /* ── Bordures ── */
  --color-border:              #e5e7eb;
  --color-border-light:        #f3f4f6;
  --color-border-focus:        #3AA8DB;
  --color-border-cta:          #a8d5f0;

  /* ── Gradients tokenisés ── */
  --gradient-primary:          linear-gradient(135deg, #00457c 0%, #0066a8 100%);
  --gradient-primary-hover:    linear-gradient(135deg, #003a66 0%, #005288 100%);
  --gradient-primary-dark:     linear-gradient(135deg, #00457c 0%, #002d52 100%);
  --gradient-danger:           linear-gradient(135deg, #d11a2a 0%, #b01522 100%);
  --gradient-surface:          linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
  --gradient-surface-soft:     linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  --gradient-nav-hover:        linear-gradient(95deg, #f0f7fc 0%, #e8f2f8 100%);


  /* =========================================================
     TYPOGRAPHIE
  ========================================================= */

  --font-primary:   'Roboto', sans-serif;
  --font-heading:   'Poppins', sans-serif;

  --text-xs:    0.6875rem;  /* 11px */
  --text-sm:    0.75rem;    /* 12px */
  --text-base:  0.8125rem;  /* 13px */
  --text-md:    0.875rem;   /* 14px */
  --text-lg:    1rem;       /* 16px */
  --text-xl:    1.125rem;   /* 18px */
  --text-2xl:   1.375rem;   /* 22px */
  --text-3xl:   1.75rem;    /* 28px */
  --text-4xl:   2.5rem;     /* 40px */


  /* =========================================================
     BORDURES
  ========================================================= */

  --border-thin:    0.5px;
  --border-base:    1px;
  --border-medium:  2px;

  --radius-sm:      4px;
  --radius-md:      8px;
  --radius-lg:      12px;
  --radius-xl:      16px;
  --radius-full:    999px;


  /* =========================================================
     OMBRES
  ========================================================= */

  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:    0 3px 8px rgba(0, 0, 0, 0.10);
  --shadow-lg:    0 6px 16px rgba(0, 0, 0, 0.12);
  --shadow-focus: 0 0 0 3px rgba(58, 168, 219, 0.15);


  /* =========================================================
     ESPACEMENTS
  ========================================================= */

  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   12px;
  --space-lg:   16px;
  --space-xl:   24px;
  --space-2xl:  32px;
  --space-3xl:  48px;


  /* =========================================================
     TRANSITIONS
  ========================================================= */

  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.3s ease;


  /* =========================================================
     Z-INDEX
  ========================================================= */

  --z-dropdown:  100;
  --z-sticky:    200;
  --z-modal:     300;
  --z-overlay:   9999;

}