/* Territorios - paleta terracota (#B84A28) en lugar del verde.
   Para Asset Injector > CSS Injector de UN solo sitio.
   html:root gana a :root del tema aunque el CSS se cargue antes. */

html:root {
  /* Marca */
  --primary: #B84A28;
  --primary-700: #973C20;
  --primary-900: #5E2412;
  --secondary: #D67858;
  --deep: #2E1108;

  /* Texto sobre --primary: el verde original era claro (texto oscuro),
     el terracota es oscuro (texto blanco). */
  --on-primary: #ffffff;

  /* Fondos y bordes derivados */
  --bg-soft: #f9f1ec;
  --bg-mint: #fcf6f2;
  --tint: #f6e3db;
  --border: #e6c4b4;
  --border-soft: #f1dcd1;

  /* Sombras (antes con tinte verde) */
  --sh-sm: 0 1px 3px rgba(94, 36, 18, .08), 0 1px 2px rgba(94, 36, 18, .06);
  --sh-md: 0 8px 24px rgba(94, 36, 18, .10);
  --sh-lg: 0 18px 48px rgba(94, 36, 18, .14);

  /* Opcional: los grises de texto tambien tienen tinte verde.
     Borrar estas 3 lineas si se prefiere dejar el texto como esta. */
  --fg: #2a1710;
  --fg-muted: #6b4a3e;
  --fg-soft: #8c6b5f;

  /* Anillo de foco de Claro (tema base): era verde #26a769 */
  --color-focus: #B84A28;
  --color-lightninggreen: #B84A28;
}

/* Verdes escritos a mano en territorios.css (no usan variables) */
body .marquee { background: var(--primary); }
body .agenda-tab.is-active .at-day,
body .agenda-tab.is-active .at-date { color: #ffffff; }
body .sp-initials::after { color: rgba(255, 255, 255, .95); }
body .flag { box-shadow: 0 0 0 1px rgba(94, 36, 18, .14), 0 1px 2px rgba(94, 36, 18, .12); }
body .field input:focus,
body .field textarea:focus { box-shadow: 0 0 0 3px rgba(184, 74, 40, .25); }
body .register-band::after { background: radial-gradient(circle, rgba(214, 120, 88, .5), transparent 70%); }
body .td-footer-col ul li a:hover { color: #e9a58c; }
body #tr-login { background: linear-gradient(135deg, #5E2412 0%, #4a1c0e 40%, #2E1108 10

/* Contraste: la etiqueta .eyebrow lleva texto azul marino sobre --primary;
   sobre terracota queda en 3:1, en blanco pasa a 5.3:1. */
body .eyebrow { color: #ffffff; }
body .eyebrow .dot { background: #ffffff; }

/* Opcional: sin anillo de foco al hacer click con el mouse, solo con teclado
   (el tema ya dibuja su propio contorno con :focus-visible).
   Borrar esta linea si se prefiere ver siempre el anillo. */
body :focus:not(:focus-visible) { box-shadow: none; }