/* contexts.css — redéfinition des tokens par interface.
   Le HTML pose une seule classe sur <body> : ctx-management, ctx-webshop ou ctx-pos. */

/* Management : fond légèrement teinté, le reste vient des tokens (couleur primaire paramétrable). */
.ctx-management { --c-bg: #eef1f7; }

/* Webshop : plus d'air, typographie plus généreuse, pas de barre latérale. */
/* ---------------------------------------------------------------------------
   Webshop — boutique de mode : crème, or, serif de titrage.

   Tout part d'ici. Les composants de shop.css ne connaissent que ces jetons, donc
   changer la teinte d'enseigne d'une boutique en marque blanche ne demande pas de
   toucher au dessin : on redéfinit --c-primary et le reste suit.
   --------------------------------------------------------------------------- */
.ctx-webshop {
  /* Or patiné plutôt qu'un bleu d'interface : c'est la couleur des boutons, des
     filets et des pastilles — elle porte l'enseigne sur toutes les pages. */
  --c-primary:        #b3945f;
  --c-primary-hover:  #9d7f4d;
  --c-primary-soft:   #f2ebdf;

  /* Crème sur crème : le fond n'est jamais blanc pur, les visuels produit s'y posent
     sans trancher. Le blanc est réservé aux surfaces qui doivent ressortir (cartes,
     en-tête collant, champs). */
  --c-bg:             #faf7f2;
  --c-surface:        #ffffff;
  --c-surface-2:      #f2ece3;     /* beige plus soutenu : bandes, fonds d'images produit */
  --c-border:         #e8e0d4;
  --c-border-strong:  #d6cab8;
  --c-text:           #2b2521;     /* brun très sombre plutôt que noir pur */
  --c-text-muted:     #7d7268;

  --content-max: 1280px;
  --control-h: 48px;
  --fs-md: 1rem;

  /* Angles droits : une boutique de mode se dessine à la règle. Les arrondis
     d'interface (12 px, pastilles) font « application », pas « vitrine ». */
  --radius-sm: 0; --radius: 0; --radius-lg: 0;
  --shadow:    0 18px 44px rgba(52, 38, 22, .10);
  --shadow-sm: 0 1px 3px rgba(52, 38, 22, .06);

  --font-sans: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

/* La serif ne sert qu'aux titres et aux prix : appliquée au texte courant elle devient
   fatigante à lire, et les formulaires perdent en lisibilité. */
.ctx-webshop .section-title,
.ctx-webshop .hero-title,
.ctx-webshop .page-title,
.ctx-webshop h1, .ctx-webshop h2,
.ctx-webshop .tile-title,
.ctx-webshop .banner-content h2,
.ctx-webshop .price-now {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.15;
}
.ctx-webshop h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: 0; }

/* Boutons : rectangulaires, discrets, lettres légèrement espacées. Pas de gras — la
   couleur et l'espace suffisent à les désigner. */
.ctx-webshop .btn {
  border-radius: 0;
  padding-inline: var(--sp-5);
  font-weight: 400;
  font-size: var(--fs-sm);
  letter-spacing: .06em;
}
.ctx-webshop .btn-lg { min-height: 52px; padding-inline: var(--sp-6); font-size: var(--fs-md); }
.ctx-webshop .btn-primary { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.ctx-webshop .btn-primary:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); }
/* Dans cette parure, le bouton « fort » est l'or de l'enseigne, pas le noir : le noir
   est réservé au pied de page. `.btn-dark` est employé par une vingtaine de pages comme
   bouton d'action principale — le rehabiller ici les met toutes d'accord d'un coup,
   plutôt que de changer une classe dans chaque gabarit. */
.ctx-webshop .btn-dark { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.ctx-webshop .btn-dark:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); color: #fff; }
/* Sur une bande sombre, l'or garderait un contraste trop faible : on repasse au blanc. */
.ctx-webshop .section-dark .btn-dark, .ctx-webshop .site-footer .btn-dark { background: #fff; border-color: #fff; color: var(--c-text); }
.ctx-webshop .btn-light { background: #fff; color: var(--c-text); border-color: var(--c-border-strong); }
.ctx-webshop .btn-light:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.ctx-webshop .btn-outline { background: transparent; border-color: currentColor; color: inherit; }
.ctx-webshop .btn-outline:hover { background: var(--c-text); border-color: var(--c-text); color: #fff; }
.ctx-webshop .btn-block { width: 100%; }
.ctx-webshop input, .ctx-webshop select, .ctx-webshop textarea { border-radius: 0; }
/* Cases à cocher et boutons radio : le bleu du navigateur jurait avec l'or de l'enseigne. */
.ctx-webshop { accent-color: var(--c-primary); }

/* Le surtitre : petites capitales espacées, sans le filet d'interface. */
.ctx-webshop .eyebrow { font-weight: 400; font-size: .7rem; letter-spacing: .22em; color: var(--c-text-muted); }
.ctx-webshop .eyebrow::before, .ctx-webshop .eyebrow::after { display: none; }

/* POS : écran tactile — grandes cibles, contrastes forts, fond sombre. */
.ctx-pos {
  --control-h: 52px;
  --fs-md: 1.125rem;
  --fs-2xl: 2.25rem;
  --radius-sm: 10px;
  --c-bg: #101318;
  --c-surface: #1a1f28;
  --c-surface-2: #222835;
  --c-border: #2c3341;
  --c-border-strong: #3a4354;
  --c-text: #eef1f6;
  --c-text-muted: #9aa3b5;
  --c-primary-soft: #1e2b52;
}
.ctx-pos .btn { font-size: var(--fs-md); }
.ctx-pos .btn-lg { min-height: 64px; font-size: 1.25rem; }