/* ============================================================
   ABIRES — Design Tokens
   Plateforme de vente de sacs
   Version 1.0 — source de vérité pour toutes les interfaces
   ============================================================ */

:root {
  /* ---------- Couleurs de marque ---------- */
  --ab-rouge:        #E4002B;  /* Rouge Abires — CTA, liens, accents, promos */
  --ab-rouge-aplat:  #FF2E55;  /* Rouge des grands aplats (bannières, hero) — CONSTANT entre thèmes, version douce validée */
  --ab-rouge-hover:  #C10024;  /* Survol des boutons / liens */
  --ab-rouge-actif:  #99001C;  /* État pressé */
  --ab-rouge-fond:   #FDECEF;  /* Fond teinté (badges, alertes promo) */
  --ab-noir:         #141317;  /* Noir Abires — texte, header, footer */

  /* ---------- Neutres (biais chaud, accordés au rouge) ---------- */
  --ab-texte:            #141317;
  --ab-texte-secondaire: #5F5A5E;
  --ab-texte-desactive:  #989296;
  --ab-bordure:          #E8E4E6;
  --ab-bordure-forte:    #CFC9CC;
  --ab-fond:             #FFFFFF;
  --ab-fond-alt:         #F9F7F8;  /* Sections, fonds de cartes */
  --ab-fond-inverse:     #141317;  /* Footer, bandeaux */
  --ab-texte-inverse:    #FFFFFF;

  /* ---------- Couleurs sémantiques ---------- */
  --ab-succes:       #17804D;  /* En stock, commande confirmée */
  --ab-succes-fond:  #E7F5EE;
  --ab-alerte:       #A85B00;  /* Stock faible, attention */
  --ab-alerte-fond:  #FCF1E2;
  --ab-erreur:       #B3001F;  /* Erreur, rupture de stock (plus sombre que le rouge CTA) */
  --ab-erreur-fond:  #FBE9EC;
  --ab-info:         #155EA8;
  --ab-info-fond:    #E8F1FA;

  /* ---------- Typographie ---------- */
  /* Titres : "Fredoka" 600-700 (ex-Fredoka One), même famille que le logo */
  /* Texte  : "Nunito Sans", humaniste lisible et cohérente               */
  --ab-police-titres: "Fredoka", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --ab-police-texte:  "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ab-taille-xs:   0.75rem;   /* 12px — mentions, tags */
  --ab-taille-sm:   0.875rem;  /* 14px — texte secondaire, labels */
  --ab-taille-base: 1rem;      /* 16px — corps de texte */
  --ab-taille-md:   1.125rem;  /* 18px — prix, intro */
  --ab-taille-lg:   1.375rem;  /* 22px — titre de carte, H3 */
  --ab-taille-xl:   1.75rem;   /* 28px — H2 */
  --ab-taille-2xl:  2.25rem;   /* 36px — H1 */
  --ab-taille-3xl:  3rem;      /* 48px — hero */

  --ab-graisse-normale:   400;
  --ab-graisse-semi:      600;
  --ab-graisse-grasse:    700;
  --ab-graisse-titre:     700;

  --ab-interligne-titre: 1.15;
  --ab-interligne-texte: 1.6;

  /* ---------- Espacements (base 4px) ---------- */
  --ab-esp-1: 0.25rem;   /*  4px */
  --ab-esp-2: 0.5rem;    /*  8px */
  --ab-esp-3: 0.75rem;   /* 12px */
  --ab-esp-4: 1rem;      /* 16px */
  --ab-esp-6: 1.5rem;    /* 24px */
  --ab-esp-8: 2rem;      /* 32px */
  --ab-esp-12: 3rem;     /* 48px */
  --ab-esp-16: 4rem;     /* 64px */
  --ab-esp-24: 6rem;     /* 96px */

  /* ---------- Rayons (généreux, comme le logo) ---------- */
  --ab-rayon-sm:    8px;    /* inputs, tags */
  --ab-rayon-md:    12px;   /* boutons, cartes */
  --ab-rayon-lg:    20px;   /* cartes produit, modales */
  --ab-rayon-plein: 999px;  /* pilules, badges */

  /* ---------- Ombres ---------- */
  --ab-ombre-sm: 0 1px 3px rgba(20, 19, 23, 0.08);
  --ab-ombre-md: 0 4px 14px rgba(20, 19, 23, 0.10);
  --ab-ombre-lg: 0 12px 32px rgba(20, 19, 23, 0.14);

  /* ---------- Transitions ---------- */
  --ab-transition: 150ms ease;

  /* ---------- Mise en page ---------- */
  --ab-largeur-max:   1200px;  /* conteneur principal */
  --ab-largeur-texte: 65ch;    /* colonnes de lecture */
}

/* ---------- Thème sombre (automatique) ---------- */
/* Fonds volontairement adoucis : gris sombres plutôt que noir profond. */
@media (prefers-color-scheme: dark) {
  :root {
    --ab-rouge:        #FF2E55;  /* éclairci pour rester lisible sur fond sombre */
    --ab-rouge-hover:  #FF5C7A;
    --ab-rouge-actif:  #E4002B;
    --ab-rouge-fond:   #43202B;
    --ab-texte:            #F4F2F3;
    --ab-texte-secondaire: #B3ADB1;
    --ab-texte-desactive:  #7A7478;
    --ab-bordure:          #3D3A40;
    --ab-bordure-forte:    #55525A;
    --ab-fond:             #232127;  /* gris sombre doux (au lieu de #17161A) */
    --ab-fond-alt:         #2C2A31;
    --ab-fond-inverse:     #F4F2F3;
    --ab-texte-inverse:    #141317;
    --ab-succes:       #3DC97E;
    --ab-succes-fond:  #1A3826;
    --ab-alerte:       #F0A24C;
    --ab-alerte-fond:  #3C2B15;
    --ab-erreur:       #FF5C6E;
    --ab-erreur-fond:  #421A20;
    --ab-info:         #5CA8F0;
    --ab-info-fond:    #182F45;
    --ab-ombre-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --ab-ombre-md: 0 4px 14px rgba(0, 0, 0, 0.4);
    --ab-ombre-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
  }
}

/* ============================================================
   Composants de base
   ============================================================ */

/* ---------- Boutons ---------- */
.ab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ab-esp-2);
  font-family: var(--ab-police-texte);
  font-size: var(--ab-taille-base);
  font-weight: var(--ab-graisse-grasse);
  padding: 0.75rem 1.5rem;
  border-radius: var(--ab-rayon-md);
  border: none;
  cursor: pointer;
  transition: background var(--ab-transition), transform var(--ab-transition);
  text-decoration: none;
}
.ab-btn:focus-visible { outline: 3px solid var(--ab-rouge); outline-offset: 2px; }

/* Rouge doux constant (--ab-rouge-aplat) : validé sur fond clair comme sombre */
.ab-btn--primaire { background: var(--ab-rouge-aplat); color: #fff; }
.ab-btn--primaire:hover { background: #E4002B; }
.ab-btn--primaire:active { background: #C10024; transform: scale(0.98); }

.ab-btn--secondaire {
  background: transparent;
  color: var(--ab-texte);
  box-shadow: inset 0 0 0 2px var(--ab-bordure-forte);
}
.ab-btn--secondaire:hover { box-shadow: inset 0 0 0 2px var(--ab-texte); }

.ab-btn--discret { background: var(--ab-fond-alt); color: var(--ab-texte); }
.ab-btn--discret:hover { background: var(--ab-bordure); }

/* Pleine largeur : boutons de validation dans les colonnes étroites (panier, tunnel) */
.ab-btn--bloc { display: flex; width: 100%; }
.ab-btn--bloc + .ab-btn--bloc { margin-top: var(--ab-esp-2); }

/* Action principale d'une page : plus haute, plus lisible au pouce */
.ab-btn--grand { padding: 0.95rem 1.75rem; font-size: var(--ab-taille-md); }

.ab-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ---------- Badges ---------- */
.ab-badge {
  display: inline-block;
  font-size: var(--ab-taille-xs);
  font-weight: var(--ab-graisse-grasse);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: var(--ab-rayon-plein);
}
.ab-badge--promo   { background: var(--ab-rouge); color: #fff; }
.ab-badge--nouveau { background: var(--ab-noir); color: #fff; }
.ab-badge--stock   { background: var(--ab-succes-fond); color: var(--ab-succes); }
.ab-badge--succes  { background: var(--ab-succes-fond); color: var(--ab-succes); }
.ab-badge--alerte  { background: var(--ab-alerte-fond); color: var(--ab-alerte); }
.ab-badge--rupture { background: var(--ab-erreur-fond); color: var(--ab-erreur); }

/* ---------- Alertes (messages flash, erreurs de formulaire) ---------- */
.ab-alerte {
  border-radius: var(--ab-rayon-md);
  padding: var(--ab-esp-3) var(--ab-esp-4);
  margin: 0 0 var(--ab-esp-3);
  font-size: var(--ab-taille-sm);
  border-left: 4px solid currentColor;
}
.ab-alerte ul { margin: var(--ab-esp-2) 0 0; padding-left: var(--ab-esp-4); }
.ab-alerte--succes     { background: var(--ab-succes-fond); color: var(--ab-succes); }
.ab-alerte--attention  { background: var(--ab-alerte-fond); color: var(--ab-alerte); }
.ab-alerte--erreur     { background: var(--ab-erreur-fond); color: var(--ab-erreur); }
.ab-alerte--info       { background: var(--ab-info-fond);   color: var(--ab-info); }

/* ---------- Champs de formulaire ---------- */
.ab-input {
  font-family: var(--ab-police-texte);
  font-size: var(--ab-taille-base);
  color: var(--ab-texte);
  background: var(--ab-fond);
  border: 1.5px solid var(--ab-bordure-forte);
  border-radius: var(--ab-rayon-sm);
  padding: 0.7rem 1rem;
  width: 100%;
  transition: border-color var(--ab-transition);
}
.ab-input:focus {
  outline: none;
  border-color: var(--ab-rouge);
  box-shadow: 0 0 0 3px var(--ab-rouge-fond);
}
.ab-input::placeholder { color: var(--ab-texte-desactive); }
.ab-input--erreur { border-color: var(--ab-erreur); }
.ab-input--erreur:focus { border-color: var(--ab-erreur); box-shadow: 0 0 0 3px var(--ab-erreur-fond); }
textarea.ab-input { resize: vertical; min-height: 3rem; }

/* ---------- Carte produit ---------- */
.ab-carte {
  background: var(--ab-fond);
  border: 1px solid var(--ab-bordure);
  border-radius: var(--ab-rayon-lg);
  overflow: hidden;
  transition: box-shadow var(--ab-transition), transform var(--ab-transition);
}
.ab-carte:hover { box-shadow: var(--ab-ombre-md); transform: translateY(-2px); }

.ab-prix { font-weight: var(--ab-graisse-grasse); font-size: var(--ab-taille-md); }
.ab-prix--barre {
  color: var(--ab-texte-secondaire);
  text-decoration: line-through;
  font-weight: var(--ab-graisse-normale);
  font-size: var(--ab-taille-sm);
}