/* ============================================================
   COLOR TOKENS — dual brand: BOSCA (@boscaec) + ECOCALOR (@ecocalorchimeneas)
   ============================================================ */
:root {
  /* --- BOSCA palette --- */
  --bosca-coal: #1C1C1C;        /* primary, authority, backgrounds */
  --bosca-ember: #E87A00;       /* accent, CTAs, keywords */
  --bosca-ember-red: #E8420A;   /* hot ember variant — banners, giant keywords */
  --bosca-cream: #F7F3EA;       /* light backgrounds, white space */

  /* --- ECOCALOR palette --- */
  --eco-verde: #2D6B4F;         /* primary, nature, trust */
  --eco-naranja: #E8712A;       /* accent, CTAs, energy */
  --eco-verde-oscuro: #1A3D2E;  /* shadows, depth */

  /* --- Shared neutrals --- */
  --gris-cuerpo: #4A4A4A;       /* body text on light */
  --blanco: #FFFFFF;
  --negro-profundo: #111111;

  /* --- Semantic aliases (default = BOSCA; see [data-brand] scopes) --- */
  --brand-primary: var(--bosca-coal);
  --brand-accent: var(--bosca-ember);
  --brand-accent-hot: var(--bosca-ember-red);
  --brand-deep: #0F0F0F;
  --brand-surface-light: var(--bosca-cream);

  --text-on-dark: var(--blanco);
  --text-on-dark-muted: rgba(255,255,255,0.72);
  --text-heading: var(--bosca-coal);
  --text-body: var(--gris-cuerpo);
  --text-keyword: var(--bosca-ember);
  --text-footer: rgba(255,255,255,0.5);

  --surface-dark: var(--bosca-coal);
  --surface-card: var(--blanco);
  --divider-accent: var(--bosca-ember);

  /* Protection gradient for text over photography (text left, product right) */
  --protect-left: linear-gradient(90deg, rgba(17,17,17,0.88) 0%, rgba(17,17,17,0.55) 42%, rgba(17,17,17,0) 70%); /* @kind color */
  --protect-bottom: linear-gradient(0deg, rgba(17,17,17,0.85) 0%, rgba(17,17,17,0) 45%); /* @kind color */
}

/* Ecocalor brand scope — wrap any subtree in data-brand="ecocalor" */
[data-brand="ecocalor"] {
  --brand-primary: var(--eco-verde);
  --brand-accent: var(--eco-naranja);
  --brand-accent-hot: var(--eco-naranja);
  --brand-deep: var(--eco-verde-oscuro);
  --brand-surface-light: var(--bosca-cream);
  --text-heading: var(--eco-verde);
  --text-keyword: var(--eco-naranja);
  --surface-dark: var(--eco-verde-oscuro);
  --divider-accent: var(--eco-naranja);
}