/* ============================================================
   SB Child - brand.css
   Alias semantici del colore di marchio.

   Questo è l'UNICO file che si modifica per differenziare i siti:
   dopo aver copiato il tema in "borghi" / "fattorie" incolla qui
   il preset corrispondente da assets/css/brand-presets/.

   Preset disponibili:
     → assets/css/brand-presets/borghi.css   (bordeaux primario)
     → assets/css/brand-presets/fattorie.css (arancio primario)

   Il lab usa il preset BORGHI come default di sviluppo.
   ============================================================ */


/* ── PRESET BORGHI DEL BENESSERE ────────────────────────── */
/*    primary = bordeaux #AF231C  |  accent = arancio #F1B300 */

:root {
  /* ── Colori primario e accento dominanti ── */
  --color-primary:       var(--color-bordeaux-500);   /* #AF231C */
  --color-primary-dark:  var(--color-bordeaux-600);   /* #931D17 */
  --color-primary-light: var(--color-bordeaux-100);   /* #FBD9D7 */
  --color-primary-rgb:   175, 35, 28;                 /* per --bs-primary-rgb */

  --color-accent:        var(--color-arancio-500);    /* #F1B300 */
  --color-accent-dark:   var(--color-arancio-600);    /* #CC9600 */
  --color-accent-light:  var(--color-arancio-100);    /* #FFF2C2 */

  /* ── Azioni (link, CTA, focus) ── */
  --color-action:        var(--color-primary);
  --color-action-hover:  var(--color-primary-dark);
  --color-action-active: var(--color-bordeaux-700);
  --color-action-subtle: var(--color-bordeaux-50);

  /* ── Sfondi (solo light) ── */
  --color-bg:             #FFFFFF;
  --color-bg-alt:         var(--color-warm-50);       /* #FDFAF6 — sezioni alternate */
  --color-surface:        #FFFFFF;
  --color-surface-raised: var(--color-warm-50);

  /* ── Bianco istituzionale (condiviso tra i due marchi) ── */
  --color-white: #FFFFFF;

  /* ── Testo ── */
  --color-text:            var(--color-warm-950);     /* #1C1410 — quasi-nero caldo */
  --color-text-muted:      var(--color-warm-700);     /* #6A5E4E */
  --color-text-subtle:     var(--color-warm-600);     /* #8A7D68 */
  --color-text-placeholder: var(--color-warm-500);    /* #B09F84 */
  --color-text-on-primary: var(--color-white);        /* bianco su sfondo primario */
  --color-text-on-accent:  var(--color-warm-950);     /* quasi-nero su arancio */

  /* ── Bordi ── */
  --color-border:        var(--color-warm-300);       /* #E0D2BC */
  --color-border-subtle: var(--color-warm-200);       /* #F0E8D8 */
  --color-border-strong: var(--color-warm-500);       /* #B09F84 */

  /* ── Stati di sistema ── */
  --color-success: var(--color-sage);                 /* #5E7A4A */
  --color-warning: var(--color-arancio-500);
  --color-error:   var(--color-bordeaux-600);

  /* ── Selection highlight ── */
  --color-selection-bg:   var(--color-arancio-200);   /* #FFE480 */
  --color-selection-text: var(--color-warm-950);
}

/* ── Scoping classi per showcase / layout multi-brand ──────────
   Aggiungendo .sb-brand-borghi o .sb-brand-fattorie a qualsiasi
   contenitore si sovrascrivono le variabili di brand nell'albero.
   Usato nel template Lab Showcase per mostrare entrambi i brand. */

.sb-brand-borghi {
  --color-primary:       var(--color-bordeaux-500);
  --color-primary-dark:  var(--color-bordeaux-600);
  --color-primary-light: var(--color-bordeaux-100);
  --color-primary-rgb:   175, 35, 28;
  --color-accent:        var(--color-arancio-500);
  --color-accent-dark:   var(--color-arancio-600);
  --color-accent-light:  var(--color-arancio-100);
  --color-action:        var(--color-bordeaux-600);
  --color-action-hover:  var(--color-bordeaux-700);
  --color-action-active: var(--color-bordeaux-700);
  --color-action-subtle: var(--color-bordeaux-50);
}

.sb-brand-fattorie {
  --color-primary:       var(--color-arancio-500);
  --color-primary-dark:  var(--color-arancio-600);
  --color-primary-light: var(--color-arancio-100);
  --color-primary-rgb:   241, 179, 0;
  --color-accent:        var(--color-bordeaux-500);
  --color-accent-dark:   var(--color-bordeaux-600);
  --color-accent-light:  var(--color-bordeaux-100);
  --color-action:        var(--color-bordeaux-600);
  --color-action-hover:  var(--color-bordeaux-700);
  --color-action-active: var(--color-bordeaux-700);
  --color-action-subtle: var(--color-bordeaux-50);
}